Question

我在这里有一个双重复制，一个初始重复列表，然后是第二个（用于扩展细节）。仅在点击的索引处显示/隐藏第二个重复的最佳方法是什么。我将它们按类名分隔，但Angular的Jquery Lite不支持“nextUntil”功能。我正在考虑一个ng-class条件，但我不想基于Scope（每次扩展需要temp）。

            <tr ng-repeat-start="x in calls track by $index" class="{{x.status}}"  class="{{x.status}}" ng-click="getCallDetails(x,$index)" my-draggable >
            <td><small><i class="fa fa-plus"></i></small></td>
            <td style="text-align:center;"><span class="label label-default stat-context {{x.status}}">{{x.statusdesc}}</span></td>             
            <td>{{x.cust_no}}</td>
            <td>{{x.company}}</td>
            <td>{{x.name}}</td>

            <td>{{x.emp_id}}</td>

            <td>{{x.enterdate}}</td>
        </tr>

        <tr class="callDetails"  ng-class="callDetails"  ng-repeat-end ng-repeat="y in x.callDetails"  >
            <td></td>
            <td colspan="2">{{y.emp_name}}</td>
            <td>{{y.attempt_date}}</td>
            <td colspan="2">{{y.note}}</td>
            <td class="allAtt-stat">{{y.callstatus}}</td>
        </tr>

    </tbody>

我的简单角度函数

    $scope.getCalls = function() {
        $http.get("callView.php")
            .success(function(response) {
                                $scope.calls = response;
            });

        };


    $scope.getCallDetails = function(attempt,ind) {

    $http.get("callDetails.php?a=" + attempt.action_id)
    .success(function (response) {   
        attempt.callDetails = response;

    });

};

Answer 1

对于嵌套的ng-repeats，$ index将引用最内部的作用域。如果要区分parentindex和childindex，可以使用$ index访问子元素，而可以使用$ parent。$ index或ng-init访问父元素，可以将parentindex初始化为某个值。

第一种方法：

  <div ng-repeat="item in items">
    <div>{{item.key}}</div>
    <ul  ng-repeat="val in item.value track by $index">
      <li >child index {{$index}} -- parentIndex {{$parent.$index}}</li> 
    </ul>
  </div>

第二种方法：

  <div ng-repeat="item in items" ng-init="parentIndex=$index">
    <div>{{item.key}}</div>
    <ul  ng-repeat="val in item.value track by $index">
      <li >child index {{$index}} -- parentIndex {{parentIndex}}</li> 
    </ul>
  </div>

请参见demo供参考

具有嵌套重复的角度显示/隐藏

1 个答案: