Html 动态识别重复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15301746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamic id ng-repeat
提问by marceloduende
I am trying to set a dynamic id to my div within my ng-repeat. Let me show an example.
我试图在我的 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>
My problem is, when I click on my child div, I want to get my parent id name, but looks like angular doesn't set the ID properly to the div. Is it possible to set a dynamic ID in this concept?
我的问题是，当我点击我的孩子 div 时，我想获取我的父 ID 名称，但看起来 angular 没有将 ID 正确设置为 div。这个概念可以设置动态ID吗？
PS: I tried, in the past, create a counter method on my controller and set an index, but it turns out that angular only recognizes the last value of this ID instead.
PS：我过去曾尝试在我的控制器上创建一个计数器方法并设置一个索引，但事实证明 angular 只识别此 ID 的最后一个值。
回答by pkozlowski.opensource
To answer your question, try this:
要回答您的问题，请尝试以下操作：
<div id="{{$index}}" ...>
While the above should work, this might be not what you want really (!). Please note that this is rather rare with AngularJS to manipulate elements by referring those by id.
虽然上述应该有效，但这可能不是您真正想要的（！）。请注意，AngularJS 通过 id 引用元素来操作元素是相当罕见的。
You should focus on your model, declarative describe UI and let AngularJS do the rest without doing low-level DOM manipulations "by hand".
您应该专注于您的模型，声明式描述 UI，让 AngularJS 完成剩下的工作，而无需“手动”进行低级 DOM 操作。
回答by PixnBits
A use case I can think of is associating <label>elements with their respective <input>elements, as seen in http://jsfiddle.net/YqUAp/
我能想到的一个用例是将<label>元素与其各自的<input>元素相关联，如http://jsfiddle.net/YqUAp/ 中所示
Applied there is a pkozlowski.opensource's method
<label for="{{ 'textField-' + $index }}">Option {{ $index }}</label>
<input type="text" id="{{ 'textField-' + $index }}" ng-model="field"/>
Though I'm unsure if this is the most effective method. (Even if only for readability)
虽然我不确定这是否是最有效的方法。（即使只是为了可读性）
回答by Quidam
<div id="{{$index}}" ...>
Works well, but you can also put a dynamic id with the field repeated if - for instance - subRepeat would have an id field. That would be:
效果很好，但如果 - 例如 - subRepeat 将有一个 id 字段，您也可以将动态 id 与字段重复。那将是：
<div id="subRepeat{{subRepeat.id}}" ...>
That will put ids like subRepeat1, subRepeat2, ... on your repeated div
这会将像 subRepeat1, subRepeat2, ... 这样的 id 放在重复的 div 上
回答by BaneStar007
you need to hold the index in your objects
你需要在你的对象中保存索引
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 }] }
] };
Also your repeat refers to results, which disconnects them, instead use thisResult:
此外，您的重复指的是结果，这会断开它们的连接，而是使用 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>
