CODEWITHSUNDEEP
javascripthtmlangularjs
Guido Anselmi
Guido Anselmi

Reputation: 3922

Multiple ng-switch-when directives in a single HTML tag

Below is a simplified version of what I want to do. 

    <div ng-switch on='stepNumber' >
       <div ng-switch-when="1" ng-switch-when="2" ng-switch-when="3" >One, Two, Three</div>
       <div ng-switch-when="4" >Four</div>
       <div ng-switch-when="5" ng-switch-when="10">Five, Ten</div>
    </div>

The complex version doesn't seem to work, and the code would be confusing for people to review.

Upvotes: 0

Views: 217

Answers (1)

Stewie
Stewie

Reputation: 60416

You need to write separate element with ng-switch-when for each condition:

PLUNKER

Step Number: <input type="text" ng-model="stepNumber">

<div ng-switch on="stepNumber">
  <div ng-switch-when="1">One, Two, Three</div>
  <div ng-switch-when="2">One, Two, Three</div>
  <div ng-switch-when="3">One, Two, Three</div>
  <div ng-switch-when="4">Four</div>
  <div ng-switch-when="5">Five, Ten</div>
  <div ng-switch-when="10">Five, Ten</div>
</div>

Note: This requires AngularJS v1.1.3+

OR, if you're on AngularJS v.1.1.5+ than ngIf might be cleaner solution:

PLUNKER

Step Number: 

Step Number: <input type="text" ng-model="stepNumber">

<div ng-if="stepNumberWithin(['1', '2', '3'], stepNumber)">One, Two, Three</div>
<div ng-if="stepNumberWithin(['4'], stepNumber)">Four</div>
<div ng-if="stepNumberWithin(['5', '10'], stepNumber)">Five, Ten</div>

myApp.controller('MyCtrl', function($scope) {

  $scope.stepNumberWithin = function(arr, number){
    console.log(arr, number);
    return arr.indexOf(number) !== -1;
  }

});

Upvotes: 1

Related Questions