AngularJS如何将外层容器的ngModel绑定到内部选中单选按钮的值？

嘿，这个场景我太熟悉了！你猜得没错——AngularJS的ng-model是元素级指令，它必须直接绑定在<input type="radio">这类表单控件本身上，父容器的ng-model根本不会被子单选按钮识别，更别说关联值或者触发ng-change了。不过我们完全不用给每个input都手动写一遍重复代码，用ng-repeat就能优雅解决这个问题！

优化方案1：用ng-repeat生成单选按钮（基础版） #

把你的选项放在数组里，通过循环批量生成单选按钮，这样只需要写一次ng-model、ng-value和ng-change：

<div>
  <input 
    type="radio" 
    name="radio" 
    id="radio-{{num}}" 
    ng-repeat="num in [1,2,3]"
    ng-model="ctrl.radio" 
    ng-value="num"
    ng-change="doSomething()"
  >
  <label for="radio-{{num}}" ng-repeat="num in [1,2,3]">{{num}}</label>
</div>

优化方案2：把选项定义在控制器里（更易维护） #

如果选项可能变化或者数量较多，把选项数组放在控制器里会更灵活：

// 控制器里的代码
ctrl.radioOptions = [1, 2, 3];

<!-- 模板代码 -->
<div>
  <input 
    type="radio" 
    name="radio" 
    id="radio-{{option}}" 
    ng-repeat="option in ctrl.radioOptions"
    ng-model="ctrl.radio" 
    ng-value="option"
    ng-change="doSomething()"
  >
  <label for="radio-{{option}}">{{option}}</label>
</div>

为什么原来的写法不行？ #

再补充下原理：AngularJS的表单指令（比如ng-model、ng-change）都是针对单个表单控件设计的，父容器的指令不会自动向下传递绑定逻辑。所以你之前把ng-model写在div上，相当于给div绑定了一个模型，但这个模型和子单选按钮完全没有关联，自然不会触发任何变化事件。

用ng-repeat的好处就是既遵循了AngularJS的规则，又避免了重复写相同的指令代码，完美符合你想要的简洁需求～

内容的提问来源于stack exchange，提问作者mTv