让我描述一下我正在尝试做的事情。 我正在构建一个真正动态的 ng 指令,以根据提供的数据数组和配置对象构建表。我想知道的是如何根据范围内的对象动态分配属性。假设我在范围内某处有一个对象,例如:
$scope.inputs.myInput = {
type : "number",
size : 3,
min : 0,
...
}
等等,我模板中的某处是
<tr><td>other stuff</td><td><input {{assign the attributes somehow}} /></td></tr>
结果是:
<tr><td>other stuff</td><td><input type='number' size='3' min='0' ... /></td></tr>
这有可能吗?
我尝试了什么:目前,我设法为每一行的输入数组中的每个项目创建一个输入,我可以通过 type={{type}}
分配一个类型,但 html 属性可能不同对于每种类型的输入元素,我认为以“硬编码”方式将属性分配给元素并卡在这里是很讨厌的。
提前感谢您的任何反馈!
最佳答案
.directive('dynamicAttributes', function($parse){
return function($scope, $element, $attrs) {
var attrs = $parse($attrs.dynamicAttributes)($scope);
for (var attrName in attrs) {
$attrs.$set(attrName, attrs[attrName]);
}
}
})
只需将您的属性名称-值对对象传递给 dynamic-attributes
属性,指令就会为您添加它:
dynamic-attributes="{style:'background: red;height:200px;', class: 'red'}"
在你的情况下它会是这样的:
<input dynamic-attributes="inputs.myInput">
关于javascript - AngularJS:如何将对象映射到 HTML 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20000281/