AngularJS

Question

我有两个对象，一个是用户，一个是组。用户对象包含用户所属组的 ID，组对象包含组的 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

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

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供您参考

AngularJS - 下拉选项和过滤器

AngularJS - Dropdown Options and Filters

angularjs-filter