Question

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

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

Answer 1

将 ng-controller 放在根级别

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

为什么ng-switch-when在我们使用ng-controller时不起作用？

1 个答案: