Angular 1中ng-if失效求助：单选框联动显示异常

我之前也碰到过类似的AngularJS单选按钮联动不生效的问题，给你几个实操性的思路，应该能快速解决你的ng-if失效问题：

1. 先确认绑定变量的正确性 #

单选按钮的核心是ng-model的正确绑定，你需要把第一组所有单选按钮绑定到同一个$scope变量上，并且用ng-value传入完整的drink对象（而不是仅仅name）。这样选中后，你才能通过这个变量判断饮品名称。

另外要注意大小写问题：你的数据里是name: 'Tea'，但判断条件写的是drink.name === 'tea'，大小写不匹配会导致判断失败，建议统一用toLowerCase()或者toUpperCase()来避免这个问题。

2. 规避ng-if的作用域陷阱 #

AngularJS里ng-if会创建一个独立的子作用域，如果你的绑定变量是基本类型（比如直接用$scope.selectedDrink），子作用域会继承父作用域的值，但修改时会创建自己的副本，导致父作用域的变量没更新，ng-if自然不会生效。

解决办法是把绑定变量放到一个对象容器里，比如$scope.formData = { selectedDrink: null }，这样子作用域会直接引用父作用域的对象，不会出现隔离问题。

完整代码示例 #

HTML部分 #

<div ng-app="drinkApp" ng-controller="DrinkController">
  <!-- 第一组饮品单选按钮 -->
  <div ng-repeat="drink in drinks">
    <label>
      <input type="radio" ng-model="formData.selectedDrink" ng-value="drink">
      {{drink.name}} (${{drink.price}})
    </label>
    <br>
  </div>

  <!-- 第二组单选按钮：选中Tea时显示 -->
  <div ng-if="formData.selectedDrink && formData.selectedDrink.name.toLowerCase() === 'tea'">
    <h4>请选择茶的类型：</h4>
    <label>
      <input type="radio" ng-model="formData.teaType" value="black"> 红茶
    </label>
    <label>
      <input type="radio" ng-model="formData.teaType" value="green"> 绿茶
    </label>
    <label>
      <input type="radio" ng-model="formData.teaType" value="oolong"> 乌龙茶
    </label>
  </div>

  <!-- 调试用：实时查看选中数据（开发时可以保留，上线后删掉） -->
  <pre style="margin-top:20px;">选中的数据：{{formData | json}}</pre>
</div>

JS控制器部分 #

angular.module('drinkApp', [])
.controller('DrinkController', function($scope) {
  // 你的饮品数据数组
  $scope.drinks = [
    {name: 'Tea', price: '1.00'},
    {name: 'Coffee', price: '1.50'},
    {name: 'Juice', price: '2.00'}
  ];

  // 用对象容器存储选中状态，避免作用域问题
  $scope.formData = {
    selectedDrink: null,
    teaType: null
  };
});

3. 快速调试技巧 #

如果还是不生效，可以在页面上添加{{formData.selectedDrink | json}}，实时查看选中的饮品对象，确认变量是否正确更新：

• 如果显示null，说明单选按钮的ng-model绑定有问题
• 如果显示的对象name不是'Tea'，那就是判断条件的问题

这样一步步排查，很快就能找到问题所在啦！

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