基於選擇值的過濾器angularjs

我想根據選定的值編寫過濾器。例如，如果我選擇名稱選項，我可以使用「輸入文本」搜索所有輸入了相同名稱的用戶。是否可以使用類似的語法「filter：{serach：name}」。基於選擇值的過濾器angularjs

<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>`

來源

2016-11-16 midy62

嘗試這樣的：

<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>

來源

2016-11-16 18:50:45

好的，但是這隻搜索用戶根據名稱。我想要根據名稱或電子郵件地址或地址 – midy62

更多的可擴展搜索只是添加其他屬性的過濾器。更新我的回答 –

謝謝maximus。這是一個很好的解決方案，但我必須編寫3個輸入（用於名稱，地址和電子郵件）。在我的例子中，我想寫一個輸入文本與選擇它可能在這種情況下？ – midy62

可能創造接受你選擇選項的值作爲參數和項目的數組自定義過濾器，這樣就可以通過選擇濾波器和文本輸入的值。可能是爲了你需要的矯枉過正。

我糟糕的例子：

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; 
     } 
    }; 
});

在我的HTML我只是想迭代usersListCopy在錶行。並在啓動的某個地方用ng-init調用filterOut，以便在usersListCopy上有數據。還設置ng-change =「filterOut（）;」元素上。

來源

2016-11-16 22:16:35 luisroot

基於選擇值的過濾器angularjs

回答

相關問題