AngularJS - 下拉选项和过滤器

Question

我有两个对象，一个是用户，一个是组。 user 对象包含用户所属的组的 id，groups 对象包含组的 id、名称和类型（即层次结构）。 以下示例：

users = {
 "user_id_1": {
   id: "user_id_1",
   name: "Steve Smith",
   username: "ssmith1",
   groups: ["group_id_1", "group_id_3",...]
 },
 ...
}

groups = {
 "group_id_1": {
   id: "group_id_1",
   name: "Group 1",
   type: "level_1"
 },
 ...
}

目标是（至少最初是）有两个下拉菜单，一个用于组，一个用于用户。选择一个组会过滤用户列表以仅显示该组的一部分用户。

我一直在寻找 ui-select 来为我创建下拉菜单（作为下拉菜单的一部分的输入框是理想的）或只是简单的预先输入（但它确实缺少下拉选项）。

现在我有一个简单的用户下拉示例：

<select id="user-dropdown">
 <option ng-repeat="user in $ctrl.users" value="{{ user.id }}">{{ user.name }}</option>
</select>

问题在于 Angular 过滤器只允许过滤数组而不是对象。

我有从对象创建两个数组的想法：

userArray = [user_id_1, user_id_2, ...];
groupArray = [group_id_1, group_id_2, ...];
<option ng-repeat="user in $ctrl.userArray" value="{{ $ctrl.users[user].id }}">{{ $ctrl.users[user].name }}</option>

即使在这种情况下，我也无法根据组过滤此列表，因为对象中不再有可用的组。

任何帮助或想法将不胜感激。

Answer 1

首先，将您的对象缩减为一个数组，然后在选择组下拉列表时过滤您的用户。示例代码如下：

JS：

$scope.groupArray = [];
for(var prop in $scope.groups){
  $scope.groupArray.push($scope.groups[prop]);
}

var userArray = [];
for(var prop1 in $scope.users){
  userArray.push($scope.users[prop1]);
}


$scope.onGroupSelect = function(){
  $scope.userList = [];
  $scope.userList = userArray.filter(function(user){
   return user.groups.some(function(group){
      return group === $scope.selectedGroup;
    })
  })
}

HTML：

<select ng-model="selectedGroup" ng-change="onGroupSelect()" 
  ng-options="group.id as group.name for group in groupArray">
  </select>
 <br/> 
   <select ng-model="selectedUser">
    <option ng-repeat="user in userList" value="user.id">
      {{user.name}}
    </option>
  </select>

here 是供您参考的工作 plunkr