CODEWITHSUNDEEP
angularjsng-switch
Mallashetty Avinash
Mallashetty Avinash

Reputation: 21

Why ng-switch-when will not work when we use ng-controller?

I am a beginner to coding. Please help me in finding an issue in below code. In below code When i write ng-controller, all the 3 radio options are displayed and when i remove ng-controller then ng-switch-when works fine. 

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

Upvotes: 0

Views: 24

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Place your ng-controller at the root level,

DEMO

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>

Upvotes: 0

Related Questions