基于选择值的过滤器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

回答

相关问题