AngularJS 1.x单选按钮无法勾选问题求助

嘿，我帮你看了下这个AngularJS单选按钮的问题，大概率是几个细节没处理好导致的无法勾选，咱们一步步来修正：

1. 移除冲突的ng-checked属性 #

你在部分单选按钮上添加了ng-checked="false"，这会强制按钮始终处于未选中状态，和ng-model的双向绑定逻辑完全冲突。在AngularJS中，单选按钮的选中状态应该完全由ng-model来控制，不需要额外的ng-checked，直接把这个属性删掉就好。

2. 优化ng-model的作用域绑定 #

虽然你用了$parent.vh1来规避ng-repeat的子作用域问题，但这种方式不够稳妥，容易出现意外的作用域穿透问题。更推荐的做法是在控制器里定义一个对象类型的模型容器，比如formData，然后把每个单选按钮的ng-model绑定到这个对象的属性上：

在你的控制器中添加初始化代码：

$scope.formData = {
  vh1: '',
  vh2: '',
  vh3: '',
  vh4: ''
};

然后模板里把ng-model="$parent.vh1"改成ng-model="formData.vh1"，这样就不用依赖$parent，作用域逻辑更清晰。

3. 用ng-value替代插值表达式绑定value #

你当前用的是value="{{vehicle.name}}"来绑定单选按钮的值，对于字符串类型来说虽然能生效，但AngularJS提供了专门的ng-value指令来处理表单控件的值绑定，比插值表达式更可靠，尤其是在处理非字符串类型的值时。所以把value="{{vehicle.name}}"改成ng-value="vehicle.name"。

修改后的完整HTML代码 #

<div class="row">
  <div class="col-md-3 radio-vehicle">
    <label>Vehicle-1</label> <!-- 修正了你这里的笔误，原来写的是Vehicle-3 -->
    <div ng-repeat="vehicle in vehicles">
      <input type="radio" name="vc1" 
             ng-value="vehicle.name" 
             ng-change="updateCount()" 
             ng-model="formData.vh1" 
             ng-disabled="dest3 === 'none'"> 
      {{vehicle.name}}&nbsp;({{vehicle.total_no}})
    </div>
  </div>
  <div class="col-md-3 radio-vehicle">
    <label>Vehicle-2</label>
    <div ng-repeat="vehicle in vehicles">
      <input type="radio" name="vc2" 
             ng-value="vehicle.name" 
             ng-change="updateCount()" 
             ng-model="formData.vh2" 
             ng-disabled="dest2 === 'none'"> 
      {{vehicle.name}}&nbsp;({{vehicle.total_no}})
    </div>
  </div>
  <div class="col-md-3 radio-vehicle">
    <label>Vehicle-3</label>
    <div ng-repeat="vehicle in vehicles">
      <input type="radio" name="vc3" 
             ng-value="vehicle.name" 
             ng-change="updateCount()" 
             ng-model="formData.vh3" 
             ng-disabled="dest3 === 'none'"> 
      {{vehicle.name}}&nbsp;({{vehicle.total_no}})
    </div>
  </div>
  <div class="col-md-3 radio-vehicle">
    <label>Vehicle-4</label>
    <div ng-repeat="vehicle in vehicles">
      <input type="radio" name="vc4" 
             ng-value="vehicle.name" 
             ng-change="updateCount()" 
             ng-model="formData.vh4" 
             ng-disabled="dest4 === 'none'"> 
      {{vehicle.name}}&nbsp;({{vehicle.total_no}})
    </div>
  </div>
</div>

另外提个小细节：你第一个Vehicle的label写的是Vehicle-3，应该是笔误，我在示例里改成了Vehicle-1，你可以根据实际需求调整。

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