Angular JS Filter Group选择过滤器

时间:2015-06-05 23:31:23

标签: javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

我有一个类似下面的用户对象:

$scope.users = [
     { 
         name : 'John Doe',
         attached_groups = [
            {1:object},
            {2:object}
         ]
     },
     { 
         name : 'Bob Doe',
         attached_groups = [
            {3:object},
            {4:object}
         ]
     }
];

在我的HTML中,我有以下组选择。

<select id="group_filter">
     <option value="1">Group 1</option>
     <option value="2">Group 2</option>
     <option value="3">Group 3</option>
     <option value="4">Group 4</option>
</select>

我想在群组上添加一个过滤器到ng-repeat to filer。我有以下ng-repeat。

<tr ng-repeat="user in users| filter:query>

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:2)

好吧我没有改变$ scope.users的结构,但你需要复习,因为我认为这不是最好的方法。

重要的是:

http://codepen.io/luarmr/pen/YXVqqp

ng-repeat="user in users | filter:search"

您需要定义搜索过滤器:

$scope.search = function(user) {

    if ($scope.filter === undefined ) {
      return true;
    }

    var match = false;

    angular.forEach(user.attached_groups, function(group) {
      if (group.hasOwnProperty($scope.filter)) {
        match = true;
      }
    });

    return match;
 };

如果更改attachment_groups,过滤器可能会更容易。您可以在此处查看示例:https://docs.angularjs.org/api/ng/filter/filter

答案 1 :(得分:1)

创建文本类型的输入,ng-model="query"

<input type="text" ng-model="query">

然后将过滤:

<tr ng-repeat="x in users | filter:query">...</tr>