AngularJS - Conditional Layout

AngularJS - Conditional Layout

by Andrew Pougher

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div ng-controller="andrew" class="container">
      <div class="page-header">
  <h1>Item Listing <small> by Andrew Pougher</small></h1>
</div>
    <div ng-repeat="project in projects">
        <span ng-if="$index % 3 == 0">
            <hr />

            <div class="row">
                <h3 class="col-md-4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
                <h3 class="col-md-4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
                <h3 class="col-md-4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
            </div
        </span>
    </div>
</div>

JavaScript

var app=angular.module('myApp', []);

function andrew($scope) {
    $scope.projects = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Andrew', 'Pougher'];
}