javascript - 带有嵌套重复的 Angular 显示/隐藏

Question

我在这里进行了两次重复，一个初始重复列表，然后是第二个重复列表(用于扩展详细信息)。仅在单击的索引处显示/隐藏第二个重复的最佳方法是什么？我用类名分隔它们，但是 Angular 的 Jquery Lite 不支持“nextUntil”功能。我正在考虑 ng 级条件，但我不想基于范围(每次扩展都需要是临时的)。

            <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>

我的简单 Angular 函数

    $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供引用