Neekoy Neekoy - 5 months ago 21
AngularJS Question

Angular nested ng-repeat - reuse first one after second

I have the following example nested ng-repeats:

<div ng-repeat="item1 in controller.items1>
[[ item1 ]] // This displays properly
<div ng-repeat="item2 in controller.items2">
[[ item2 ]] // This displays properly
</div>
[[ item1 ]] // This doesn't get displayed
</div>


It would seem that the nested ng-repeat is stopping the first one from being used later in the code. Can someone please help with how the first ng-repeat can be used in there?

Answer

Its working fine. Check below example -

<body ng-controller="myCtrl" ng-app="app">
  <div ng-repeat="item1 in items1">
    {{item1.name}}
    <div ng-repeat="item2 in items2">
      {{item2.name}}
    </div>
    {{item1.name}}
  </div>
</body>

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

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.items1 = [{
      name: 'Item1 - One'
    }, {
      name: 'Item1 - Two'
    }, {
      name: 'Item1 -Three'
    }, {
      name: 'Item1 - Four'
    }];

     $scope.items2 = [{
      name: 'Item2 - One'
    }, {
      name: 'Item2 - Two'
    }, {
      name: 'Item2 - Three'
    }, {
      name: 'Item2 - Four'
    }];
  }
]);
Comments