如何使用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" 
      } 
    ] 

這是你的期望，它不請簡要解釋。 入住$範圍從服務器中的數據是否與頁面加載時