Question

角度文档＆＃39;对于单选按钮上的ng-model，recommended approach是在每个输入元素上重复ng-model。

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

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

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

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

Answer 1

有几种方法可以做到这一点，一种方法是创建一个带有隔离范围的指令，该范围接受一个label的数组，与input[radio]元素对齐显示，其次是模型对于所有input[radio]元素。创建一个模板，用于处理每个标签的迭代以及ngModel中接受的isolate scope（输入无线电）。

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

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

Answer 2

创建一个指令，该指令接受属性的值，并在编译和链接模板之前将其应用于其子的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>

Demo

无线电按钮上的ngmodel没有重复

2 个答案:

指令

视图