当我们使用 ng-controller 时，为什么 ng-switch-when 不起作用？答案

【问题标题】：Why ng-switch-when will not work when we use ng-controller?当我们使用 ng-controller 时，为什么 ng-switch-when 不起作用？
【发布时间】：2018-01-21 03:26:50
【问题描述】：

我是编码的初学者。请帮助我在下面的代码中找到问题。在下面的代码中，当我编写 ng-controller 时，会显示所有 3 个单选选项，当我删除 ng-controller 时，ng-switch-when 工作正常。

<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>

<div ng-switch="selectedValue">
    <div ng-switch-when="cars">
        <ul>
            <li ng-repeat="x in cars">{{cars}}</li>
        </ul>
    </div>
    <div ng-switch-when="books">
        <table>
        <select ng-options="x for (x,y) in books"></select>
            <input type="text" ng-model="test">
            <th ng-click="funOrder('title')">Title</th>
            <th ng-click="funOrder('author')">Author</th>
            <tr>
                <td>{{books.x.title | filter: test}}</td>
                <td>{{books.x.author | orderBy: varOrder}}</td>
            </tr>
        </table>

    </div>
    <div ng-switch-when="pets">
        <p>
            Hello pets
        </p>
    </div>
</div>
<script>
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;
};
};
</script>
</body>
</html>

【问题讨论】：

标签： angularjs ng-switch

【解决方案1】：

将您的 ng-controller 放在根级别，

演示

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;
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>

<div ng-switch="selectedValue">
    <div ng-switch-when="cars">
        <ul>
            <li ng-repeat="x in cars">{{cars}}</li>
        </ul>
    </div>
    <div ng-switch-when="books">
        <table>
        <select ng-options="x for (x,y) in books"></select>
            <input type="text" ng-model="test">
            <th ng-click="funOrder('title')">Title</th>
            <th ng-click="funOrder('author')">Author</th>
            <tr>
                <td>{{books.x.title | filter: test}}</td>
                <td>{{books.x.author | orderBy: varOrder}}</td>
            </tr>
        </table>

    </div>
    <div ng-switch-when="pets">
        <p>
            Hello pets
        </p>
    </div>
</div>
 
</body>
</html>

【讨论】：