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

2020/10/08 13:01 · javascript ·  · 0评论

提供了type的HTML元素div,如何设置其id属性的值,即范围变量和字符串的连接?

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>

不必在双大括号内连接。

只是 <input id="field_name_{{$index}}" />

如果使用以下语法:

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

Angular将呈现如下内容:

 <div ng-id="object-1"></div>

但是此语法:

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

会产生类似:

<div id="object-1"></div>
本文地址:http://javascript.askforanswer.com/ruheshiyongangularjs1-xdongtaishezhihtmlyuansudeidshuxing.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!