Justin
Justin

Reputation: 2795

Angularjs ng-switch not working

What I am trying to do is:

When the dropdown toggle is clicked, if Text is clicked, it will show "test_now", if Paragragh Text is click, it will show "text list".

But I tried several times and it still not working, could someone help me on that? thanks so much!

Here is my code:

<li class="dropdown">
    <button class="btn btn-default dropdown-toggle">Add item</button>
    <ul class="dropdown-menu">
         <li ng-repeat="choice in items" ng-model="selection">
        <a>{{choice.type}}</a>
         </li>
    </ul>
</li>


<div ng-switch on "selection">
    <div class="question_typeText" ng-switch-when="Text">
        test_now
    </div>

    <div class="question_typeList" ng-switch-when="Paragraph Text">
        test_list
    </div>
</div> 

js part:

angular.module('DFS', ['ui.bootstrap']);

function PageCtrl($scope) {

    $scope.items = [
        {
            type: "Text"
        },
        {
            type: "Paragraph Text"
        },
        {
            type: "Multiple Choice"
        },
        {
            type: "Checkboxes"
        },
        {
            type: "Choose from a list"
        }
    ];

    $scope.selection = $scope.items[0].type;


}

Upvotes: 0

Views: 1869

Answers (1)

ooozguuur
ooozguuur

Reputation: 3466

Here is my example code:

    <div ng-controller="PageCtrl">
        <li class="dropdown">
          <button class="btn btn-default dropdown-toggle">Add item</button>
           <ul class="dropdown-menu">
             <li ng-repeat="choice in items">
               <a ng-click="click(choice)">{{choice.type}}</a>
             </li>
          </ul>
       </li>


      <div ng-switch on="selection">
         <div class="question_typeText" ng-switch-when="Text">
           test_now
         </div>

      <div class="question_typeList" ng-switch-when="Paragraph Text">
            test_list
      </div> 

      angular.module('myApp', []);
        function PageCtrl($scope) {

    $scope.items = [
        {
            type: "Text"
        },
        {
           type: "Paragraph Text"
        },
        {
        type: "Multiple Choice"
        },
        {
        type: "Checkboxes"
        },
        {
        type: "Choose from a list"
        }
    ];

    $scope.click = function(choice){
        $scope.selection =  choice.type;
    }

    $scope.selection = $scope.items[0].type;


}

or angularjs.org example

http://docs.angularjs.org/api/ng/directive/ngSwitch

Upvotes: 3

Related Questions