conditional ng-repeat.

how to how repeat list definite times not for all elements.

by sheelpriy gautam

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="div" ng-app>
  <div ng-controller="Main">
    <h2>sliced list(conditional NG-repeat)</h2>
    <ul ng-controller="ctrlParent">
      <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
    </ul>
    <h2>unsliced list( no conditional NG-repeat)</h2>
    <ul ng-controller="ctrlParent">
      <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
    </ul>
    <!--  <ul>
            <li ng-repeat="ab in items"><span>{{$index+1}} :: {{ab.name}} </span></li>
                  </ul> -->
  </div>
</div>

CSS

ul {
  list-style: none;
}

.div {
  padding: 25px;
}

li {
  background: #d4d4d4;
  color: #052349;
}

JavaScript

function ctrlParent($scope) {
   $scope.abc = [{
     "name": "What we do",
     url: "/Home/AboutUs"
   }, {
     "name": "Photo Gallery",
     url: "/home/gallery"
   }, {
     "name": "What we work",
     url: "/Home/AboutUs"
   }, {
     "name": "Photo play",
     url: "/home/gallery"
   }, {
     "name": "Where",
     url: "/Home/AboutUs"
   }, {
     "name": "playground",
     url: "/home/gallery"
   }, {
     "name": "What we score",
     url: "/Home/AboutUs"
   }, {
     "name": "awesome",
     url: "/home/gallery"
   }, {
     "name": "oscar",
     url: "/Home/AboutUs"
   }, {
     "name": "american hustle",
     url: "/home/gallery"
   }];
 }

 function Main($scope) {
   $scope.items = [{
     sort: 1,
     name: 'First'
   }, {
     sort: 2,
     name: 'Second'
   }, {
     sort: 3,
     name: 'Third'
   }, {
     sort: 4,
     name: 'Last'
   }];
 }