Complex toggle behaviour with angular.js

Question

Situation:

I work with angular.js for frontend (newbie) and with symfony2 (php) for backend. I query for a list of users and groups. So the html could look like that.

<ul class="user-list">
    <li ng-repeat="user in users">
        <a ng:click="select(user)">
              {{user.first_name}} {{user.last_name}}
        </a>
    </li>
</ul>

<div class="user-was-selected" ng-show="selectedUser != null">
    <ul class="dropdown-menu">
        <li ng-repeat="group in groups"><a>{{ group.name }}</a></li>
    </ul>
</div>

When a user is selected from the list another view will be shown that displays a dropdown list filled with groups. This are all groups available. So the list query does not depend on the user.

However a user can be a member of a group. So I need to set a class on the li element, like "in-group".

In symfony2 this is easy, because its templating engine "twig" has methods like user.hasGroup to check if the user is in the group. I can do this right in the twig template.

My question is, do I have to make a rest api call for this? It would mean I have to make a rest api group check per group for every user. Does this make any sense or do you see another solution?

In addition to that, a click on a group from the dropdown would remove/add (toggle) the user from the clicked group.

You can use ng-class to conditionally apply a class. The condition would be something like "selectedUser.hasGroup". If you don't have that method, add it to your User resource prototype. — holographic-principle
– holographic-principle, Commented Apr 19, 2013 at 2:13

holographic-principle · Accepted Answer · 2013-04-19 02:27:33Z

1

You would add ng-class to your li

<ul class="user-list">
    <li ng-repeat="user in users">
        <a ng:click="select(user)">
              {{user.first_name}} {{user.last_name}}
        </a>
    </li>
</ul>

<div class="user-was-selected" ng-show="selectedUser != null">
    <ul class="dropdown-menu">
        <li ng-class="{in-group: selectedUser.inGroup}" ng-repeat="group in groups"><a>{{ group.name }}</a></li>
    </ul>
</div>

You would add the inGroup method to your User resource like this (assuming you have a factory):

angular.module('myApp').factory('User', ['$resource', function($resource) {
  var User = $resource(...);

  ...

  User.prototype.inGroup = function(group) {
    //determine if user is in group
    //'this' (selectedUser) and 'group' are at your disposal
    //return true if there's a match
  };

  ...

  return User;
}]);

edited Apr 19, 2013 at 2:27

answered Apr 19, 2013 at 2:21

holographic-principle

19.7k10 gold badges48 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

Complex toggle behaviour with angular.js

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