$ index перезапустить каждую строку в ng-repeat

Question

$ index перезапустить каждую строку в ng-repeat

0

Я хочу повторить этот код для каждого элемента в моем массиве:

<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-повторы выглядят не так.

Каждый внутренний элемент в каждой строке наружу имеет одинаковый идентификатор. Таким образом, для каждого "контейнера" parentIndex является одним и тем же и начинается с 0.

Что мне делать в этом случае? Это не фиксированный массив, который я загружаю в начале. Этот массив получает данные от сокета, и он становится больше при каждом получении сообщения.

Если вам нужен еще какой-то код, просто спросите.

Biribu 01 июль 2015, в 18:22

Источник

Теги:

angularjs

arrays

angularjs-ng-repeat

2 ответа

0

Вам не нужно использовать 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>

Ivan Burnaev 01 июль 2015, в 12:56

0

Я обновил код, но он все равно не работает. Во всяком случае, приятно знать, что я буду использовать его с этого момента. Я дал тебе +1, потому что кто-то дал тебе -1. Спасибо.
Biribu 01 июль 2015, в 16:27

Ещё вопросы

Я обновил код, но он все равно не работает. Во всяком случае, приятно знать, что я буду использовать его с этого момента. Я дал тебе +1, потому что кто-то дал тебе -1. Спасибо.

ajmajmajma · Accepted Answer · 2015-07-01T13-46-00.000Z

Я бы порекомендовал просто использовать чистый угловой путь. В повторении каждый элемент имеет свою собственную область, поэтому вы можете сделать 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>

Если вы хотите использовать класс collapse для анимации или что-то еще, вы можете изменить часть ng-show, которая сворачивается в

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

Первый "коллапс" - это любой класс, который вы хотите переключить.

Спасибо!. Теперь работает нормально.