Question

我正在尝试在ng-repeat中为我的div设置动态ID。让我举个例子。

<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时，我想得到我的父ID名称，但看起来像angular不能正确地将ID设置为div。是否可以在此概念中设置动态ID？

PS：我曾尝试在我的控制器上创建一个计数器方法并设置一个索引，但事实证明，angular只识别此ID的最后一个值。

Answer 1

要回答您的问题，请尝试以下方法：

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

虽然上面应该有效，但这可能不是你想要的（！）。请注意，AngularJS通过引用id来操作元素是相当罕见的。

您应该专注于您的模型，声明性描述UI，让AngularJS完成其余工作，而无需“手动”进行低级DOM操作。

Answer 2

我能想到的一个用例是将<label>元素与各自的<input>元素相关联，如http://jsfiddle.net/YqUAp/

中所示

应用a pkozlowski.opensource的方法

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

虽然我不确定这是否是最有效的方法。（即使只是为了可读性）

Answer 3

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

效果很好，但是如果 - 例如 - subRepeat会有一个id字段，你也可以在字段中重复显示一个动态id。那将是：

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

这会在你的重复div上放置像subRepeat1，subRepeat2 ......这样的ID

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

动态识别重复

4 个答案: