AngularJS:如何将对象映射到HTML属性

Question

让我来描述我想要做的事情.我正在构建一个真正的动态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属性可以对每种类型的输入元素有所不同,我认为分配属性是不好的元素"硬编码"的方式,并被困在这里.

提前感谢您的任何反馈!

Answer 1

这是给你的一个插件:

.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">