Nested Angular Switches?

Question

I'm building a MEAN SPA and the current page I'm working on displays the users in the database. I'm pretty new to Angular so I'm still trying to wrap my head around it.

I have a parent container of which the content is controlled by an <ng-switch> and switches to show the relevant content depending on whether the user has clicked 'view all' or 'add new'. This works fine.

What I'm aiming to do now is when the user clicks on a user that's displayed in 'view-all', I want the content to switch to a view containing that users details where they can then go and edit the profile etc. What would be the best way to achieve this?

My HTML is set up like so:

Main staff view

<div class="staff" ng-controller="staffController">
    <div class="side-menu">
        <h2>Staff</h2>
        <ul>
            <li><a ng-click="tab='view-all'"><i class="fa fa-user"></i> View All</a></li>
            <li><a ng-click="tab='add-new'"><i class="fa fa-plus"></i> Add New</a></li>
        </ul>
    </div>

    <div class="page-content" ng-switch on="tab">
        <div ng-switch-when="view-all" class="tab-content">
            <staff-view-all></staff-view-all>
        </div>
        <div ng-switch-when="add-new" class="tab-content">
            <staff-add-new></staff-add-new>
        </div>
    </div>
</div>

Directives:

.directive('staffViewAll', function () {
        return {
            restrict: 'E',
            templateUrl: 'partials/staff/view-all.ejs'
        }
    })

.directive('staffAddNew', function () {
        return {
            restrict: 'E',
            templateUrl: 'partials/staff/add-new.ejs'
        }
    })

view-all.ejs

<h2>View all staff</h2>

{{ users.length }} users in system

<ul>
    <li ng-repeat="user in users"> <!-- click this and you see the singular view -->
        <img ng-src="{{user.avatar}}?dim=100x100" />
        <h3>{{user.username}}</h3>
        <h4>{{user.email}}</h4>
    </li>
</ul>

Have a look at ui.router, built for exactly this purpose - github.com/angular-ui/ui-router — Neil
– Neil, Commented May 26, 2014 at 13:14

link · Accepted Answer · 2014-05-26 15:01:46Z

1

Use another ng-switch to switch to detailed view for the selected user.

Something like this: jsfiddle

<div ng-switch-when="list">
    <ul>
        <li ng-repeat="fruit in fruits">
            <a href="#"ng-click="showDetail(fruit)">{{fruit}}</a>
        </li>
    </ul>
</div>
<div ng-switch-when="details">
    <p>Details for {{ selectedFruit }}</p>
    <a href="#" ng-click="showList()">Back to list</a>
</div>

Controller:

    $scope.showDetail = function (fruit) {
        $scope.selectedFruit = fruit;
        $scope.moduleState = 'details';
    }

    $scope.showList = function()
    {
        $scope.moduleState = 'list';
    };

answered May 26, 2014 at 15:01

link

1,6861 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested Angular Switches?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related