Question

我想为我的数组中的每个元素重复此代码：

<div class="container" ng-init="parentIndex = $index" ng-repeat="urn in apsocket.mensajes | filter:searchTextURN">
  <button style="width:100%" type="button" class="btn btn-info" data-toggle="collapse" data-target="{{'#urn_'+$index}}">{{urn.urn }}</button>
  <div id="{{'urn_'+$index}}" class="collapse">
{{urn.timestamp}}
   <br>
    <p>
    <div align="right" ng-repeat="meas in urn.measurements track by $index">
      <button style="width:90%;background-color: #68ec6a;border-color:#8bf48c;" type="button" class="btn btn-success" data-toggle="collapse" data-target="{{'#meas_'+parentIndex + '_' +$index}}">{{meas.phenomenon}}    </button>
      <div style="width:90%" id="{{'meas_'+parentIndex + '_' +$index}}" class="collapse">
    {{meas.value + ' ' + meas.uom}}
  </div>
</div>
</p>

  </div>
</div>

但是，虽然每行中的第一个按钮工作正常并且创建了可折叠的工作，但内部ng重复似乎不是。

每个外部行中的每个内部元素具有相同的id。因此，对于每个＆＃34;容器＆＃34;，parentIndex是相同的，从0开始。

在这种情况下我该怎么办？这不是我在开始时加载的固定数组。这个数组接收来自套接字的数据，每次收到消息时它都会变大。

如果您还需要更多代码，请询问。

Answer 1

我建议只使用纯角度方式。重复一遍，每个项目都有它自己的范围，所以你可以做一个ng-click =“collapse =！collapse”（类似的东西），我在这里给你一个例子

http://jsfiddle.net/X8era/82/

我只是为了举例而制作了一个虚假的数据结构

<ul>
       <li ng-repeat="item in objs" ng-click="collapse = ! collapse">
         {{item.id}}  
           <ul ng-show="item.more.length > 0 && collapse">
            <li ng-repeat="child in item.more" ng-click="collapse = ! collapse; $event.stopPropagation();" >
                {{child.id}}
                <ul ng-show="child.more.length > 0 && collapse">
            <li ng-repeat="baby in child.more">
                {{baby.id}}
               </li>
           </ul>
               </li>
           </ul>
        </li>
    </ul>

如果您想使用折叠类来制作动画或其他任何内容，您可以将折叠的ng-show部分更改为

 ng-class="{ 'collapse' : collapse }"

第一个'崩溃'是你想要切换的任何课程。

Answer 2

您不必使用ng-init="parentIndex = $index"。您可以像$index一样访问父$parent.$index 每个ng-repeat都会创建新范围，这就是您可以使用$parent关键字访问父级的原因。

演示：

var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
  $scope.items = [0, 1, 2, 3, 4];
});

<div ng-app="app" ng-controller="ctrl">
  <ul>
      <li ng-repeat="item in items track by $index">
          <ul>
              <li ng-repeat="item in items track by $index">
                  parent: {{$parent.$index}}
                  current: {{$index}}
              </li>
          </ul>
      </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

$ index重新开始ng-repeat中的每一行

2 个答案: