Menu
I have an ng-repeat inside another ng-repeat. In the second one, when I want to pass $index and $parent.$index to a function (using ng-click or tooltip), I don't get the correct indexes.
In order to get it work I need to use $parent.$index and $parent.$parent.$index.
What's weird is that I only need to do that for the second ng-repeat. Also the values seem only getting wrong when they are inside ng-click or tooltip (if I display them inside the ng-repeat they are correct)
I've made a plunker so you can see the result : http://plnkr.co/edit/K6jWTffe8BqgLZhFIbHL?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@~3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.3.0-beta.17/angular.js" data-semver="1.3.0-beta.17" data-require="[email protected]"></script>
<script data-require="[email protected]" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.data = [
{id: "1", text: "text 1", more: [
{id_more: "10", text_more: "text more 10"},
{id_more: "11", text_more: "text more 11"},
{id_more: "12", text_more: "text more 12"},
{id_more: "13", text_more: "text more 13"},
]},
{id: "2", text: "text 2", more: [
{id_more: "20", text_more: "text more 20"},
{id_more: "21", text_more: "text more 21"},
{id_more: "22", text_more: "text more 22"},
{id_more: "23", text_more: "text more 23"},
]},
{id: "3", text: "text 3", more: [
{id_more: "30", text_more: "text more 30"},
{id_more: "31", text_more: "text more 31"},
{id_more: "32", text_more: "text more 32"},
{id_more: "33", text_more: "text more 33"},
]},
];
$scope.func = function(index){
var result = index;
return result;
};
$scope.funcMore = function(index, indexMore){
var result = index + ' - ' + indexMore;
//The problem is when I want to do $scope.data[index].more[indexMore]
//Then it throws error because some of the index are undefined in the array
return result;
};
$scope.clickMore = function(index, indexMore){
alert(index + ' - ' + indexMore);
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl" style="margin:20px">
<div ng-repeat="d in data" style="border:1px solid #ccc; margin-bottom:10px">
{{d.id}} - {{d.text}} - {{$index}} -
<span tooltip-placement="bottom" tooltip-html-unsafe="{{func($index)}}">Working</span>
<div ng-repeat="more in d.more" style="margin-left:20px">
{{more.id_more}} - <!-- ID -->
{{more.text_more}} - <!-- Text -->
({{$parent.$index}} - {{$index}}) <!-- Correct $parent.$index and $index -->
<span ng-click="clickMore($parent.$parent.$index, $parent.$index)" tooltip-placement="bottom" tooltip-html-unsafe="{{funcMore($parent.$parent.$index, $parent.$index)}}">Working</span> -
<span ng-click="clickMore($parent.$index, $index)" tooltip-placement="bottom" tooltip-html-unsafe="{{funcMore($parent.$index, $index)}}">Not Working</span>
</div>
</div>
</body>
</html>
436
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index .
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
The controller creates a child scope and the ng-repeat , which will create an LI element for each item in the list of To Do items. It also creates a new scope for each element.
Take a look at the documentation for ng-init and ng-repeat.
With ng-init, you can alias $index so that you don't have the conflict you are seeing. The example in the docs is almost exactly what you are trying to do.
From the docs:
<script>
angular.module('initExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [['a', 'b'], ['c', 'd']];
}]);
</script>
<div ng-controller="ExampleController">
<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
</div>
</div>
</div>
Here is a modified Plunk
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
