Динамический идентификатор ng-repeat

Я пытаюсь установить динамический идентификатор для своего div внутри моего ng-repeat. Позвольте мне показать пример.

<div id="$index" ng-repeat="repeat in results.myJsonResults">
    <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResults.subresults">
</div>

Моя проблема в том, что когда я нажимаю на мой дочерний div, я хочу получить имя родительского идентификатора, но выглядит так: angular не устанавливает идентификатор в div. Можно ли установить динамический идентификатор в этой концепции?

PS: Раньше я пытался создать метод счетчика на моем контроллере и установить индекс, но оказывается, что angular только распознает последнее значение этого идентификатора.

Ответ 1

Чтобы ответить на ваш вопрос, попробуйте следующее:

<div id="{{$index}}" ...>

В то время как вышеприведенное должно работать, это может быть не то, что вы действительно хотите (!). Обратите внимание, что это довольно редко, когда AngularJS управляет элементами, ссылаясь на них по id.

Вы должны сосредоточиться на своей модели, декларативно описать интерфейс и позволить AngularJS делать все остальное, не делая манипуляции с DOM низкого уровня "вручную".

Ответ 2

Случай использования, о котором я могу думать, связан с элементами <label> с их соответствующими элементами <input>, как показано в http://jsfiddle.net/YqUAp/

Применяется метод pkozlowski.opensource

<label for="{{ 'textField-' + $index }}">Option {{ $index }}</label>
<input type="text" id="{{ 'textField-' + $index }}" ng-model="field"/>

Хотя я не уверен, что это самый эффективный метод. (Даже если только для удобства чтения)

Ответ 3

<div id="{{$index}}" ...>

Хорошо работает, но вы также можете поместить динамический идентификатор с повторением поля, если, например, у subRepeat будет поле id. Это будет:

<div id="subRepeat{{subRepeat.id}}" ...>

Это добавит идентификаторы, такие как subRepeat1, subRepeat2,... на ваш повторный div

Ответ 4

вам нужно удерживать индекс в своих объектах

results = { myJsonResults : [ 
    { name: "abc", id: 1, subResults: [
                               { subName: "123", id: 1 },
                               { subName: "456", id: 2 }] }
    { name: "xyz", id: 2, subResults: [
                               { subName: "789", id: 1 },
                               { subName: "098", id: 2 }] }
                            ] };

Также ваш повтор ссылается на результаты, которые их отключают, вместо этого используйте thisResult:

<div id="thisResult.id" ng-repeat="thisResult in results.myJsonResults">
    {{ thisResult.name }}
    <div id="subResult.id" ng-click="saveID(subResult.id)" ng-repeat="subResult in thisResult.subResults"> {{ subResult.subName }} </div>
</div>