ng-repeat-start/end

Using ng-repeat-start and end to show how sibling elements can be in the same repeat

by Aaronias

HTML

<div ng-app="App">
  <div ng-controller="ctrl">
    I have {{friends.length}} friends. They are:
    <input type="search" ng-model="q" placeholder="filter friends..." />
    <ul>
        <!-- Need to add 'track by $index' to ng-repeat to have duplicated -->
      <li ng-repeat-start="friend in friends | filter:q">
        [{{$index + 1}}] {{friend.name}} who is 
      </li>
      <ul>
          <li>
              a {{friend.gender}}
          </li>
        </ul>
      <ul ng-repeat-end>
      <li type="circle" >
        {{friend.age}} years old.
      </li>
      </ul>
    </ul>
  </div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<style>

JavaScript

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

app.controller('ctrl', function($scope){
    var sam = {name:'Samantha', age:60, gender:'girl'};
   $scope.friends =  [
    sam,
    sam,
    sam,
    sam
  ];
    
    
});