5

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>
ram1993
  • 979
  • 1
  • 9
  • 13
RJV
  • 287
  • 1
  • 7
  • 20
  • Try this http://learnkode.com/Tryit/Example/Ng-Switch-1 – Ajay Barot Oct 14 '16 at 13:03
  • [Their demo](https://plnkr.co/edit/jzYWNZiWzyLWkCnStVtW?p=preview) does the same thing... looks like a bug. Click on the "Edit in Plunker" button. It's weird, because it works on the documentation page. – Zach Oct 14 '16 at 13:10
  • Created a bug report https://github.com/angular/angular.js/issues/15266 – Sajan Oct 14 '16 at 13:17
  • I looked at the `iframe` [source for the example](https://docs.angularjs.org/examples/example-ng-switch/index.html) on the documentation page - looks like it's fixed in 1.5.9 because it's using that version of angular.js. – Zach Oct 14 '16 at 13:21
  • Here's the proof using your code - http://plnkr.co/edit/tJSs8TDLUsuajr551jpw?p=preview You can grab the 1.5.9 build [here](https://docs.angularjs.org/angular.min.js) and verify that it works for you. – Zach Oct 14 '16 at 13:24
  • Apparently the on is not necesary... look here: [AngularJS ng-switch Directive](http://www.w3schools.com/angular/ng_ng-switch.asp) – DIEGO CARRASCAL Oct 14 '16 at 13:36

1 Answers1

7

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.

Narretz
  • 4,769
  • 32
  • 40