Use links to change ng-switch

Question

How would I use links to trigger an ng-switch?

My current html:

<ul class="nav nav-list bs-docs-sidenav affix sidenav">
    <li><a href="#" ng-click="page='resources'">Resources</a></li>
    <li><a href="#" ng-click="page='users'">Users</a></li>

</ul>

<div ng-switch on="page">
    <div ng-switch-when="resources">
        <h1>resources Div</h1>
    </div>
    <div ng-switch-when="users">
        <h1>Users</h1>
    </div>
    <div ng-switch-default>
        <h1>Default</h1>
    </div>
</div>

My controller:

function Ctrl($scope) {
    $scope.page = 'users';
}

What am I missing?

nothing. If I change the expressions that change page to a function that changes page and then console.log($scope.page) I can see that page is getting changed, but the switch doesn't occur. — Charlie Andrews
– Charlie Andrews, Commented Jun 10, 2013 at 18:41
@Dogbert snippet is working correctly. Can we select an answer for this question? — adelriosantiago
– adelriosantiago, Commented Sep 3, 2017 at 22:47

user3123032 · Accepted Answer · 2016-10-19 09:13:22Z

I stumbled on a similar problem and solved it by using an object rather then a property on the scope so that the values are not overridden by the ng-switch directive.

The difference between the question asked and this solution is that I change the page value from withing the ng-switch scope.

Declare nav object in the controller

$scope.nav = {
                 page : 1
             }

HTML

<div ng-switch="nav.page">
<div ng-switch-when="1">
    First page
    <a href="#" ng-click="nav.page=2">Resources</a>
</div>
<div ng-switch-when="2">
    Second page
    <a href="#" ng-click="nav.page=3">Resources</a>
</div>
<div ng-switch-when="2">
    Third page
</div>

Would love to know why this is the case for this setup. Thanks for the answer though, really helped me out!

mfeingold · Accepted Answer · 2013-06-10 18:49:36Z

You have to bind your controller to the top level element. Here is the fiddle

HTML:

<div ng-app ng-controller="Ctrl">
     <ul class="nav nav-list bs-docs-sidenav affix sidenav">
         <li><a href="#" ng-click="page='resources'">Resources</a></li>
         <li><a href="#" ng-click="page='users'">Users</a></li>

     </ul>
     <div ng-switch on="page">
        <div ng-switch-when="resources">
           <h1>resources Div</h1>
        </div>
        <div ng-switch-when="users">
           <h1>Users</h1>
        </div>
        <div ng-switch-default>
           <h1>Default</h1>
        </div>
     </div>
</div>

My controller is bound in the routeProvider in app.js, so that does not help my problem.

Collectives™ on Stack Overflow

Use links to change ng-switch

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related