選択値に基づくフィルタanglejs

Question

選択した値に従ってフィルタを書きたいと思います。 たとえば、「名前」オプションを選択すると、「入力テキスト」を使用して検索することができます。同じ名前を持つすべてのユーザーが入力されます。同様の構文 "filter：{serach：name}"を使用することもできます。

`

<input type="text" data-ng-model="search" /> 
<select name="option"> 
    <option value="name">name</option> 
    <option value="address">address</option> 
    <option value="email">email</option> 
</select> 


     <table> 
      <thead> 
       <tr> 
        <th>name</th> 
        <th>address</th> 
        <th>Email</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr data-ng-repeat="user in usersList | filter:{option:search}"> 
        <td><span data-ng-bind="user.name"></span></td> 
        <td><span data-ng-bind="user.address"></span></td> 
        <td><span data-ng-bind="user.email"></span></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    </div> 
</div>` 

Answer 1

そのようにしてみてください。

<tbody> 
    <tr data-ng-repeat="user in usersList | filter:{name:user.name, address: user.address}"> 
     <td><span ng-model="user.name"></span></td> 
     <td><span ng-model="user.address"></span></td> 
    </tr> 
</tbody> 

Answer 2

はたぶん、あなたはそのオプションでフィルタをかけることができるようにパラメータやアイテムの配列としてご選択オプションの値を受け入れるカスタムフィルタを作成しますテキスト入力の値。あなたが必要とするものを過度に使うかもしれません。

私のお粗末な例：私のhtmlで

app.controller("CurrencyController", function ($scope, $http, $filter) { 
    $scope.option = '';//select value 
    $scope.search = '';//input text 
    $scope.usersList = [ 
     {'name':'luis', 'id':3, 'address':'somewhere 1'}, 
     {'name':'charles', 'id':4, 'address':'somewhere 2'}, 
     {'name':'john', 'id':5, 'address':'somewhere 1'}, 
     {'name':'mike', 'id':6, 'address':'somewhere 3'} 
    ]; 

    $scope.filterOut = function(){ 
//create a copy of usersList to keep original if no value for filter 
     $scope.usersListCopy = angular.copy($scope.usersList); 
     $scope.usersListCopy = $filter('aFilter')($scope.usersListCopy, $scope.search, $scope.option); 
    }; 

}). 
filter('aFilter', function() { 
    return function(input, searchingFor, searchOnField) { 
     if (searchOnField == '' || searchingFor == '') { 
      return input; 
     } else { 
      var returnItems = []; 

      for (var a = 0; a < input.length; a++){ 
       //cycle thru every item key 
       if(input[a][searchOnField] == searchingFor){ 
        returnItems.push(input[a]); 
       } 

      } 
      console.log(returnItems); 
      return returnItems; 
     } 
    }; 
}); 

私はちょうどテーブル行にusersListCopy繰り返します。また、開始時にng-initを指定してfilterOutを呼び出し、usersListCopyにデータがあるようにします。また、ng-change = "filterOut（）;"を設定します。 on要素。