如何使用 angularjs (1.x) 动态设置 HTML 元素的 id 属性?

IT技术 javascript angularjs angularjs-scope string-concatenation
2021-02-01 05:37:12

提供一个类型为 的 HTML 元素div,如何设置其id属性的值,即范围变量和字符串的串联?

6个回答

ngAttr 正如官方文档中所介绍的那样,指令在这里完全可以提供帮助

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

例如,要设置元素id属性值div,使其包含索引,视图片段可能包含

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

这将被插入到

<div id="object-1"></div>
哪里myScopeObject来的呢?我在哪里定义它?
2021-03-15 05:37:12
以下两个在行为上不是相同的:<div id="{{ 'object' + index }}"><div ng-attr-id="{{ 'object' + index }}">文档似乎说前置ng-attr-是为了帮助元素是非标准的情况,比如不是<div>. 我是否正确阅读文档?
2021-03-17 05:37:12
@broc.seib 使用 nd-attr 不仅与标准有关。这是一个很好的做法,因为 HTML 解释器可以在加载 angular 之前将 id 分配给元素。并且 ng-attr 确保仅在加载 angular 时才将 id 分配给元素。<img> 标签中的 ng-src 也是如此。
2021-03-21 05:37:12
我做了 ng-attr-id="{{ 'Panel' + file.Id }}" 但它没有为我生成 id="Panel12312" :(
2021-03-23 05:37:12
@JanAagaard 让我们假设myScopeObjectscope使用控制器公开对象的属性另请参阅docs.angularjs.org/guide/controller这对你来说足够清楚还是我要进一步说明?
2021-03-24 05:37:12

这件事对我很有效:

<div id="{{ 'object-' + $index }}"></div>

时光飞逝,也许最直观的语法现在可以按预期工作。我记得在迭代列表时遇到了一些问题。
2021-03-15 05:37:12
这将在 90% 的情况下正确工作,但有时您可能会遇到难以调试的错误。您应该改用 ng-attr-id。
2021-03-18 05:37:12
ng-attr-id方法是,以确保原料纳克表达再也不能在有效的HTML属性呈现(例如idlabel等)。这是为了停止任何下游使用读取 ng 'junk'(例如,在渲染完成之前,或在 js 崩溃之后)
2021-03-27 05:37:12
ng-attr-id在 0% 的情况下是有利的。无法提供示例,因为没有。
2021-04-06 05:37:12

如果您遇到此问题但与较新的Angular 版本 >= 2.0 相关

<div [id]="element.id"></div>
我同意; 它只会对那些认为它有用的成员有用。
2021-03-16 05:37:12
一些成员即使在搜索 Angular 链接,他们仍然点击 Angularjs 链接。这有点令人困惑,错误将继续发生。
2021-03-19 05:37:12
那没用,问题出在 AngularJS 的上下文中
2021-04-11 05:37:12

我发现实现这种行为的一种更优雅的方法很简单:

<div id="{{ 'object-' + myScopeObject.index }}"></div>

对于我的实现,我希望 ng-repeat 中的每个输入元素都有一个唯一的 id 来关联标签。因此,对于包含在 myScopeObjects 中的一组对象,可以这样做:

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

在动态添加这样的内容时,能够即时生成唯一的 id 非常有用。

我认为这种方法有问题。我在页面加载后初始化角度绑定。现在有时 div 无法正确加载,我猜是因为不同 div 的 id 冲突。
2021-03-22 05:37:12
有趣的。如果您可以在 plunker 示例中重现您的行为,我很乐意查看。使用 'ng-attr-id=' 是否有效而只使用 'id=' 不行?
2021-03-31 05:37:12

您可以简单地执行以下操作

在你的js中

$scope.id = 0;

在您的模板中

<div id="number-{{$scope.id}}"></div>

这将呈现

<div id="number-0"></div>

没有必要在双大括号内连接。