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

首先，将您的对象简化为数组，然后在选择组下拉列表时过滤用户。下面的示例代码：

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是工作的朋克供您参考

AngularJS-下拉选项和过滤器

1 个答案: