动态 id ng-repeat

Posted 2023-03-05

【中文标题】动态 id ng-repeat

【英文标题】：dynamic id ng-repeat

【发布时间】：2013-02-24 10:55:12

【问题描述】：

我正在尝试在我的 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 的最后一个值。

【问题讨论】：

您不能在页面中重复 ID，您正在这样做。为什么你还需要身份证？

【参考方案1】：

要回答你的问题，试试这个：

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

虽然以上内容应该可以，但这可能不是您真正想要的（！）。请注意，AngularJS 很少通过 id 引用元素来操作元素。

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

【讨论】：

你有什么好的例子来说明同样的行为吗？

@marceloduende 从功能上讲，您必须首先解释您要做什么......一个工作的笨拙将是理想的。

同意。需要在中继器中设置一个 id 绝对是一种代码味道。我假设您出于某种原因将使用 jquery，如果这是正确的，那么您应该为此写 directives

@Sharondio 实际上我怀疑这里的用例是选择一个“活动” div - 无论活动意味着什么 - 所以我不确定 ngModel 是否会参与其中。无论如何，如果没有来自问题作者的更多信息，就无法判断。

有时第三方库需要 id 字符串，在这种情况下我们需要唯一的 id

【参考方案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"/>

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

【讨论】：

这对我来说在角度 1.2rc3 中似乎不起作用（特别是对于带有 ng-options 的选择元素）

出于同样的原因我这样做。 新

【参考方案3】：

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

效果很好，但是如果 - 例如 - subRepeat 将有一个 id 字段，您也可以将动态 id 与重复的字段一起放置。 那将是：

<div id="subRepeatsubRepeat.id" ...>

这会将诸如 subRepeat1、subRepeat2、... 之类的 id 放在重复的 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>