点击保存按钮时Radio Button Model返回undefined值问题排查

我来帮你排查问题，你的代码里有两个关键问题导致获取单选按钮值时返回undefined：

1. ng-model 绑定的变量与JS中定义的变量不匹配 #

你在HTML里给单选按钮的ng-model绑定的是radio.selectedProductBlock，但在JS里却是定义了$scope.selectedProductBlock，两者名称完全不对应，自然取不到值。

2. ng-repeat 带来的作用域继承问题 #

即使变量名改对了，直接绑定基本类型（比如字符串、数字）在ng-repeat里也会有问题——因为ng-repeat会为每个循环项创建子作用域，子作用域中的基本类型变量会遮蔽父作用域的同名变量，导致父作用域的变量无法被正确更新。AngularJS里推荐用对象包装基本类型来避免这个问题。

修正后的代码 #

HTML部分

<tr ng-repeat="item in recruleData">
  <td>{{item.package_name}}</td>
  <td>
    <input type="radio" name="radio" ng-model="radio.selectedValue" value="0">A<br/>
    <input type="radio" name="radio" ng-model="radio.selectedValue" value="1"> B
  </td>
</tr>
<a class="btn btn-primary pull-right" ng-click="radioValue();">Save</a>

JS部分

// 用对象包装单选值，规避ng-repeat的作用域问题
$scope.radio = {
  selectedValue: ''
};

$scope.radioValue = function(){
  alert($scope.radio.selectedValue);
};

修正说明 #

• 我们在$scope上定义了一个radio对象，用它来包装selectedValue属性。这样即使在ng-repeat的子作用域里，也会通过原型链找到父作用域的radio对象，不会出现变量遮蔽的问题。
• HTML里的ng-model改成radio.selectedValue，和JS里的对象属性完全对应，点击保存按钮时就能正确获取到选中的单选值了。

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