$ index重新启动ng-repeat中的每一行

I want to repeat this code for each element in my array:

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

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

But, while first button in each row works fine and creates a working collapsible, the inner ng-repeats seem not.

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

Each inner element in each outter row, have the same id. So, for each "container", parentIndex is the same and starts in 0.

每个outter行中的每个内部元素具有相同的id。因此,对于每个“容器”,parentIndex是相同的并从0开始。

What should I do in this case? This is not a fixed array which I load at the beggining. This array recevies data from socket and it get bigger each time a message is received.

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

If you need any more code or so, just ask.

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

2 个解决方案

#1

I would recommend just using the pure angular way. In a repeat, each item has it's own scope so you can do an ng-click="collapse = ! collapse" (something like that), I made you an example here

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

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

I just made a fake data structure for examples sake

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

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

If you would like to use the collapse class for an animation or whatever, you can change the part of the ng-show that is collapse to

如果您想将折叠类用于动画或其他任何内容,则可以更改要折叠的ng-show部分

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

The first 'collapse' being whatever class you want to be toggled.

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

#2

You don't have to use ng-init="parentIndex = $index". You can access to parent $index like this $parent.$index.
Each ng-repeat creates new scope, that's why you can access to parent by using $parent keyword.

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

Demo:

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>

#1