提供一个类型为 的 HTML 元素div
,如何设置其id
属性的值,即范围变量和字符串的串联?
如何使用 angularjs (1.x) 动态设置 HTML 元素的 id 属性?
IT技术
javascript
angularjs
angularjs-scope
string-concatenation
2021-02-01 05:37:12
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>
这件事对我很有效:
<div id="{{ 'object-' + $index }}"></div>
如果您遇到此问题但与较新的Angular 版本 >= 2.0 相关。
<div [id]="element.id"></div>
我发现实现这种行为的一种更优雅的方法很简单:
<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 非常有用。
您可以简单地执行以下操作
在你的js中
$scope.id = 0;
在您的模板中
<div id="number-{{$scope.id}}"></div>
这将呈现
<div id="number-0"></div>
没有必要在双大括号内连接。
其它你可能感兴趣的问题