为何使用ng-controller时ng-switch-when无法正常工作？求代码排查

看起来你遇到的问题根源在于控制器代码的语法错误以及模板与控制器作用域绑定的问题，导致ng-switch无法正确识别selectedValue的变化。咱们一步步来修复：

1. 先修正控制器里的语法错误 #

你的控制器代码有几处语法问题，直接导致控制器无法正常初始化，作用域变量根本没被绑定到页面上：

• $scope.cars=[ford, ferrari, audi]; 这里的ford等是字符串，需要加引号，否则会被当作未定义的变量
• book1:{title:"CAT" author:"xyz"} 这里title和author之间缺少逗号，对象属性必须用逗号分隔
• 控制器的闭合部分多了一个大括号，最后应该是});而不是}; };

修正后的控制器代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // 修正：字符串添加引号
  $scope.cars = ["ford", "ferrari", "audi"];
  $scope.books = {
    book1: {title: "CAT", author: "xyz"}, // 修正：添加属性分隔逗号
    book2: {title: "Novel", author: "pqr"},
    book3: {title: "MAths", author: "abc"},
    book4: {title: "Java", author: "java"}
  };
  $scope.funOrder = function(x) {
    $scope.varOrder = x;
  };
}); // 修正：正确闭合控制器和模块注册

2. 确保页面正确绑定ng-app和ng-controller #

你需要在页面的根元素（比如<body>）上添加ng-app="myApp"，并在包裹表单和switch的容器上添加ng-controller="myCtrl"，这样页面才能正确识别控制器的作用域变量：

<body ng-app="myApp" ng-controller="myCtrl">
  <form>
    Choose any topic:
    <input type="radio" ng-model="selectedValue" value="cars">Cars
    <input type="radio" ng-model="selectedValue" value="books">Books
    <input type="radio" ng-model="selectedValue" value="pets">Pets
  </form>
  <!-- 剩下的switch代码 -->
</body>

3. 修正模板里的其他逻辑错误 #

除了switch的问题，你的模板还有几处逻辑错误：

• ng-repeat="x in cars">{{cars}}</li> 这里应该显示当前循环的单个元素x，而不是整个数组cars，改成{{x}}
• 书籍部分的表格渲染逻辑错误，ng-options需要绑定ng-model，表格行需要用ng-repeat遍历书籍对象，修正后的书籍模块代码：

<div ng-switch-when="books">
  <table>
    <!-- 给select添加ng-model绑定选中项 -->
    <select ng-model="selectedBook" ng-options="book.title for (key, book) in books"></select>
    <input type="text" ng-model="test">
    <th ng-click="funOrder('title')">Title</th>
    <th ng-click="funOrder('author')">Author</th>
    <!-- 用ng-repeat遍历books对象的值，同时应用过滤和排序 -->
    <tr ng-repeat="book in books | filter: test | orderBy: varOrder">
      <td>{{book.title}}</td>
      <td>{{book.author}}</td>
    </tr>
  </table>
</div>

为什么移除ng-controller后能正常工作？ #

当你移除ng-controller时，Angular会使用全局作用域，selectedValue直接绑定在全局作用域上，ng-switch能正常识别值的变化。但加上控制器后，由于控制器代码语法错误导致初始化失败，selectedValue没有绑定到控制器的作用域中，ng-switch无法正确判断值的变化，所以所有选项都显示了。

把这些修正后，你的代码应该就能正常工作了，ng-switch会根据选中的单选按钮正确切换显示内容。

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