ng-switch

In this example, using ng-switch, I'm able to switch between different views. Each view is assigned a controller. I've put a quick sample online here : http://jsfiddle.net/FBHjZ/1/ It looks like the controller is reinstanciated everytime I switch views : If you enter a val in the input field, go to home and switch back to settings, the value is lost. How can I prevent this? Basically, what I want is to keep state from previous views when I switch between views. There is no way of preventing the existing ngSwitch from re-instantiating controllers and re-creating a new scope. As noted in the

I have the following ngSwitch: <p ng-switch="status"> <span ng-switch-when="wrong|incorrect"> Wrong </span> <span ng-switch-default> Correct </span> </p> As you can see, I have the text Wrong for two options wrong and correct . I have tried (as you can see) to use the pipe | , but that doesn't work. Any suggestions ? Chauskin Rodion For angular >=v1.5.10, You can do it by adding ng-switch-when-separator="|" to ng-when node. see example in documentation. <span ng-switch-when="wrong|incorrect" ng-switch-when-separator="|"> see discussion here https://github.com/angular/angular.js/issues/3410

I have a div based on switch but the switch has a boolean variable but the value will be evaluated based on the row.id. Can some one tell me what I am doing wrong here ? <div ng-switch="hasUrl"> <a ng-switch-when="row.id.indexOf(':') < 0 === true" href="{{url + row.id}}"> <!-- hasUrl = true --> {{getName(row)}} </a> <a ng-switch-default href="......."> {{getName(row)}} </a> </div> You don't need the === , remove it. <div ng-switch="hasUrl"> <a ng-switch-when="row.id.indexOf(':') < 0" href="{{url + row.id}}"> <!-- hasUrl = true --> {{getName(row)}} </a> <a ng-switch-default href="......."> {

Im making an 'interactive menu' that moves along with user clicks. Im wondering if there is a way to include html templates in ng-switch, since all the logic is different in each 'switch' - it will result in huge html files. <div class="content" ng-switch on="selection"> <div ng-switch-when="1" > <h1>1</h1> </div> <div ng-switch-when="2"> <h1>2</h1> </div> </div> Use ngInclude : <div class="content" ng-switch on="selection"> <div ng-switch-when="1" > <ng-include src="'template1.html'"></ng-include> </div> <div ng-switch-when="2"> <ng-include src="'template2.html'"></ng-include> </div> </div>

I am new to AngularJS and I've been unable to find specific tutorials of a list and grid view toggle switch buttons that loads in two different HTML partials. Read official ng-include , ng-switch official docs and searched SO. Unfortunately, we don't want to use UI-router . Is loading in two partials ( list.html and grid.html ) the correct Angular way of coding this? The most relevant help I've found are these: 1. http://tutorialzine.com/2013/08/learn-angularjs-5-examples (Example #5) There was an insightful comment on Example #5 Nice simple examples - well done. The last example that switches

Is it possible to have an OR in ng-switch-when? <div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type"> <div ng-switch-when="val1 **OR** val2"> sup </div> </div> If not, how could the above be accomplished? Thanks :) Malkus ngswitch only allows you to compare a single condition. I you are looking to test multiple conditions you can use ng-if available with version 1.1.5 Reference It is important to note that using ng-if and ng-switch remove the element from the DOM structure, opposed to show and hide. This is important when you traverse the DOM to find elements.

I'm trying to get Angular to generate a CSS slider based on my data. I know that the data is there and am able to generate it for the buttons, but the code won't populate the ng-switch-when for some reason. When I inspect the code, I see this twice (which I know to be correct as I only have two items): <div ng-repeat="assignment in assignments" ng-animate="'animate'" class="ng-scope"> <!-- ngSwitchWhen: {{assignment.id}} --> </div> My actual code: <div ng-init="thisAssignment='one'"> <div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px"> <span ng

I have this repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq that show when I click 'Title3' and enter a value in text box although the entered value shows reflected in the UI, when I click the 'click' button nothing is binded for the scope attribute $scope.test. I don't know what is wrong with ng-switch or maybe I'm doing something wrong. Help is appreciated!!! http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq charlietfl This is a scope inheritance problem due to ng-switch creating its own scope. One recommendation made often is always to use a dot on models. The reason is that when the controller