AngularJS + ng-repeat: chỉ số $ lạ và $ parent $ giá trị chỉ mục khi chuyển vào hàm

Tôi có một ng-repeat bên trong một số ng-repeat khác. Trong phần thứ hai, khi tôi muốn vượt qua $index và $parent.$index cho một chức năng (sử dụng ng-click hoặc tooltip), tôi không nhận được các chỉ mục chính xác.

Để hoạt động, tôi cần sử dụng $parent.$index và $parent.$parent.$index.

Điều kỳ lạ là tôi chỉ cần làm điều đó cho lần lặp lại thứ hai. Ngoài ra các giá trị dường như chỉ nhận sai khi họ đang ở trong ng-click hoặc tooltip (nếu tôi hiển thị chúng bên trong ng-lặp lại họ là chính xác)

Tôi đã thực hiện một plunker để bạn có thể xem kết quả: http://plnkr.co/edit/K6jWTffe8BqgLZhFIbHL?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]~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>

Nguồn

2015-02-23 Bobby Shark

Hãy xem documentation cho ng-init và ng-repeat.

Với ng-init, bạn có thể bí danh $ index để bạn không có xung đột bạn đang thấy. Ví dụ trong tài liệu gần như chính xác những gì bạn đang cố gắng làm.

Từ các tài liệu:

<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

Nguồn

2015-02-23 20:12:56

Cảm ơn bạn. Vì vậy, nếu tôi hiểu rõ, để chuyển đúng '$ index' sang hàm' ng-click' ot 'tooltip' của tôi, tôi cần đầu tiên' ng-init' một biến và chuyển biến đó bên trong 'ng-click' của tôi? –

Tôi đã thêm một Plunk đã sửa đổi sẽ xóa nó lên cho bạn –

Và để trả lời câu hỏi trong nhận xét của bạn, có - điều đó sẽ hoạt động. –

AngularJS + ng-repeat: chỉ số $ lạ và $ parent $ giá trị chỉ mục khi chuyển vào hàm

Trả lời

Các vấn đề liên quan