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

Here's a plunk for you：

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

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

1 个答案: