如何使用angularjs过滤表上的数据

Question

因此，我有此表显示从angularjs服务器中获取的用户。这是用户对象：

'users'= [
          {
            "name":"Jane Doe",
            "gender":"female",
            "role":"admin"
          },
          {
            "name":"John Doe",
            "gender":"male",
            "role":"owner"
          }
   ]

这是显示此数据的表：

    <div class="col-md-4">
    <h3>Filter by user role</h3>    
    <select class="form-control" ng-model="roleOrder">
            <option 
                ng-repeat="user in users" 
                value="{{user.role}}">{{user.role}}</option>
    </select>
</div>

<table class="table table-bordered">
    <thead>
        <th>Name</th>
        <th>Gender</th>
        <th>role</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users | filter:{role: roleOrder}">
            <td>{{user.name}}</td>
            <td>{{user.gender}}</td>
            <td>{{user.role}}</td>
        </tr>   
    </tbody>
</table>

问题是，当页面加载时，直到我从下拉列表中选择一个角色来过滤之前，什么都不会显示users。

我的目标是首先显示所有用户，然后在option select下拉列表中选择相应的角色后，按其角色过滤用户。

有没有比我尝试的更好的方法？还是我该怎么办？谢谢你的任何想法

Answer 1

您可以为它添加函数，例如AngularJS自定义过滤器函数

在js文件中

$scope.predicate = function( roleOrder ) {
  return function( item ) {
    return !roleOrder || item.role === roleOrder;
  };
};

和在HTML

 <tr ng-repeat="user in users | filter:predicate(roleOrder)">
        <td>{{user.name}}</td>
        <td>{{user.gender}}</td>
        <td>{{user.role}}</td>
 </tr>