0

Angular 文档对单选按钮上的 ng-model推荐的方法是在每个输入元素上重复 ng-model。

我希望它更干燥，以避免错误。

[UPD] 我还希望在 html 中明确声明每个输入元素（即输入元素在 html 中重复，但 ng-model 不是）。所以我不希望使用在指令中生成输入元素的解决方案，但是修改现有输入元素的指令就可以了。

有没有办法为一组单选按钮输入指定一次 ng-model ？

FWIW，我尝试创建一个指令（在包含输入的 div 上），它为每个输入元素添加了一个 ng-model 属性，虽然它产生了正确的 DOM，但输入并未绑定到范围。该指令的优先级 >0（ng-model 的优先级为 0）。

4

2 回答 2

2

label有几种方法可以做到这一点，一种方法是创建一个具有隔离作用域的指令，该作用域接受要与元素对齐显示的 s 数组，input[radio]第二种是所有input[radio]元素的模型。创建一个模板来处理每个标签的迭代ngModel以及isolate scope.

更新：您可以input[radio]在指令链接之前更新指令中的所有元素，编译阶段。用于element.find('input')获取指令内的所有输入单选元素，无论元素级别如何。评估它们是否是无线电类型并相应地添加 ngModel 和 name 属性。

请参阅此更新的PLUNKER 演示（尺寸模型示例）

于 2014-06-13T05:38:55.003 回答
1

创建一个指令，该指令在模板被编译和链接之前采用属性的值并将其应用于ng-model其子项的属性：

指示

directive('radio', function(){
  return {
    restrict: 'E',
    compile: function(tElem, tAttrs) {
      angular.forEach(tElem.find('input'), function(input){
        angular.element(input).attr('ng-model', tAttrs.model)
      });
    }
  }
})

看法

<radio model="someModel.value">
  <input type="radio" value="someValue"> Some label
  <input type="radio" value="someOtherValue"> Some other label
</radio>

演示

于 2014-06-13T18:57:01.593 回答