如何使用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 custom filter function

为它添加功能在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> 

Answer 2

用户数据显示，当页面加载时，它的工作正常。你可以检查下面的链接。

http://plnkr.co/edit/FwqivguAcyLnqxKVWEC6?p=preview

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

这是你的期望，它不请简要解释。 入住$范围从服务器中的数据是否与页面加载时