提供了一个div类型的HTML元素,如何设置其id属性的值,这是一个范围变量和字符串的连接?
ngAttr指令在这里完全有帮助,正如官方文档中介绍的那样
https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
例如,要设置div元素的id属性值,以便它包含一个索引,视图片段可能包含
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
哪个会被插值
<div id="object-1"></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是非常有用的。
如果你使用这个语法:
<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>
您可以简单地执行以下操作
在你的js中
$scope.id = 0;
在模板中
<div id="number-{{$scope.id}}"></div>
它会渲染
<div id="number-0"></div>
没有必要在双花括号内连接。
推荐文章
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- JS字符串“+”vs concat方法
- AngularJS使用ng-class切换类
- 访问Handlebars.js每次循环范围之外的变量
- 如何用JavaScript截屏一个div ?
- 如何为其他域设置cookie