複雜的切換行爲，與angular.js

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