All geek questions in one place

AngularJS + ng-repeat: the value of weird $ index and $ parent. $ Index when switching to a function

I have ng-repeat inside another ng-repeat . In the second case, when I want to pass $index and $parent.$index function (using ng-click or tooltip ), I do not get the correct indexes.

To get the job I need to use $parent.$index and $parent.$parent.$index .

Which is strange that I need to do this only for the second ng-repeat. Also, the values ​​seem erroneous only if they are inside ng-click or tooltip (if I display them inside ng-repeat, they are correct)

I 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=" angular.js@1.3.0-beta.17 "></script> <script data-require=" ui-bootstrap@0.11.0 " data-semver="0.11.0" src="http://angular-ui.imtqy.com/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>
+6
source share
1 answer

Take a look at the documentation for ng-init and ng-repeat.

With ng-init, you can use the alias $ index so that you don't have the conflict you see. An example in the docs is almost 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

+5
source

Source: https://habr.com/ru/post/982908/

More articles:


All Articles