AngularJS Template

by sunil puvvada

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
 <body ng-controller="Channels">
     <p>Set:
         <label ng-repeat="n in [0,1]">
       <input type="radio" name="pageSet" ng-model="$parent.pageSet" ng-value="n" />{{n}}
         </label>
     </p>
     <p>Page: 
         <label ng-repeat="n in [0,1,2,3]">
         <input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="n" /> {{n}}
         </label>
     </p>
    <ul>
      <li ng-repeat="channel in channels | limitTo: groupSize * ((groupSize * pageSet) + pageNumber + 1) | limitTo: -groupSize">
        <p>{{channel.id}}</p>
      </li>
    </ul>
  </body>

JavaScript

function Channels($scope) {
    $scope.groupSize = 4;
    $scope.pageSet = 0;
    $scope.pageNumber = 0;
    $scope.channels = [
        {"id": "Ch-001"}, {"id": "Ch-002"}, {"id": "Ch-003"}, {"id": "Ch-004"},
        {"id": "Ch-005"}, {"id": "Ch-006"}, {"id": "Ch-007"}, {"id": "Ch-008"},
        {"id": "Ch-009"}, {"id": "Ch-010"}, {"id": "Ch-011"}, {"id": "Ch-012"},
        {"id": "Ch-013"}, {"id": "Ch-014"}, {"id": "Ch-015"}, {"id": "Ch-016"},
        {"id": "Ch-017"}, {"id": "Ch-018"}, {"id": "Ch-019"}, {"id": "Ch-020"},
        {"id": "Ch-021"}, {"id": "Ch-022"}, {"id": "Ch-023"}, {"id": "Ch-024"},
        {"id": "Ch-025"}, {"id": "Ch-026"}, {"id": "Ch-027"}, {"id": "Ch-028"},
        {"id": "Ch-029"}, {"id": "Ch-030"}, {"id": "Ch-031"}, {"id": "Ch-032"}
    ];
}

angular.module('app', [])
  .controller('Channels', Channels);

angular.bootstrap(document.body, ['app']);