Question

情况：

我使用angular.js作为前端（新手），使用symfony2（php）作为后端。我查询用户和组的列表。所以html看起来就像那样。

<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>

当从列表中选择用户时，将显示另一个显示填充了组的下拉列表的视图。这些都是可用的组。因此列表查询不依赖于用户。

但是，用户可以是组的成员。所以我需要在li元素上设置一个类，比如“in-group”。

在symfony2中这很容易，因为它的模板引擎“twig”有像user.hasGroup这样的方法来检查用户是否在组中。我可以在树枝模板中做到这一点。

我的问题是，我是否需要为此进行休息api调用？这意味着我必须为每个用户进行每组的休息api组检查。这有什么意义，还是你看到了另一种解决方案？

除此之外，从下拉列表中点击某个组会从所点击的组中删除/添加（切换）该用户。

Answer 1

您可以将ng-class添加到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>

您可以将inGroup方法添加到User资源中（假设您有工厂）：

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;
}]);

使用angular.js的复杂切换行为

1 个答案: