ng-switch-when-separator not working in angularJS

4.1k Views Asked by At

ng-switch is not working when i use ng-switch-when-separator . when I select settings the switch is pointing to default div

angular.module("myModule", [])
 .controller("myController", function ($scope) {
    $scope.items = ['settings', 'home', 'options', 'other'];
    $scope.opt = $scope.items[0];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myModule">
    <div ng-controller="myController">
        <select ng-model="opt" ng-options="item for item in items">
        </select>
        <code>selection={{opt}}</code>
        <hr />
        <div class="animate-switch-container"
            ng-switch on="opt">
            <div class="animate-switch" ng-switch-when="settings|options" ng-switch-when-separator="|">Settings Div</div>
            <div class="animate-switch" ng-switch-when="home">Home Span</div>
            <div class="animate-switch" ng-switch-default>default</div>
        </div>
    </div>
</body>

1

There are 1 best solutions below

0
Narretz On

This is an issue with the documentation page, but not a bug in Angular itself. What happens:

  • The docs by default show the API for the current master branch (also called snapshot)
  • the embedded plnkrs also use the built angular files from the master branch
  • the automatically created plnkrs fall back to the latest stable version (in that case 1.5.8) which doesn't support the separator yet.

So you'll have to wait for 1.5.10 to use that feature.