Scenario:
I have an ng-repeater with a nested ng-repeater. In the nested loop, I am trying to track the parents $index value.
Javascript:
var app = angular.module("myApp", []); myApp.controller('ctrl', function($scope) { var json="[{\"Id\":1,\"Name\":\"test1\",\"Department\":\"department1\"},{\"Id\":2,\"Name\":\"test2\",\"Department\": \"department2\"},{\"Id\":3,\"Name\":\"test3\",\"Department\":\"department1\"}]"; $scope.data = JSON.parse(json); $scope.keys = ['Id', 'Name', 'Department']; });
HTML:
<table class="table table-bordered table-striped"> <thead> <tr> <th ng-repeat="key in keys">{{key}}</th> </tr> </thead> <tr ng-repeat="d in data"> <td ng-repeat="key in keys"> <input type="text" class="form-control" ng-model="data[$parent.$index][key]" /> </td> </tr> </table>
However, when I introduce an ng-if in the same element that has a reference to $parent.$index like
<span ng-model="data[$parent.$index][key]" ng-if="key='Id'"></span> <input type="text" class="form-control" ng-model="data[$parent.$index][key]" ng-if="key!='Id'" />
the parents index is set to the child's index.
Solution:
This behaviour is because ng-if creates a child scope on the element, so $parent is actually its immediate ng-repeat's child scope, not the parent one, and the $index is again the same $index inherited from its immediate parent (i.e second ng-repeat's childscope). So, we need to use ng-init to alias special properties of ng-repeat and use that property instead of using $parent. The above code should be as below
<table class="table table-bordered table-striped"> <thead> <tr> <th ng-repeat="key in keys">{{key}}</th> </tr> </thead> <tr ng-repeat="d in data" ng-init="parentIndex=$index"> <td ng-repeat="key in keys"> <span ng-if="key=='Id'">{{data[parentIndex][key]}}</span> <input type="text" class="form-control" ng-model="data[parentIndex][key]" ng-if="key!='Id'" /> </td> </tr> </table>
0 comments:
Post a Comment