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" 
      } 
    ] 

これはあなたの期待されており、それが簡単にそれを説明してくださいません。 ページが読み込まれたときにサーバーからのデータが$ scopeにバインドされているかどうかを確認します