AngularJS + ng-repeat: 当传入函数时，$index和$parent.$index的值很奇怪

Question

AngularJS + ng-repeat: 当传入函数时，$index和$parent.$index的值很奇怪

6

我在一个 ng-repeat 中嵌套了另一个 ng-repeat。在第二个 ng-repeat 中，当我想通过 ng-click 或 tooltip 将 $index 和 $parent.$index 传递给一个函数时，我得到的索引是不正确的。

为了使它正常工作，我需要使用 $parent.$index 和 $parent.$parent.$index。

奇怪的是，我只需要对第二个 ng-repeat 这样做。同时，只有当它们在 ng-click 或 tooltip 内部时，这些值才会出现错误（如果我在 ng-repeat 内显示它们，则它们是正确的）。

我制作了一个 plunker，你可以看到结果: 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.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>

- Bobby Shark

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe Enzminger · Accepted Answer

请查看ng-init和ng-repeat的文档。

使用ng-init，您可以将$index别名，以避免您正在看到的冲突。文档中的示例几乎与您尝试执行的操作相同。

从文档中获取：

<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