在angularjs中动态设置过滤器答案

【问题标题】：Dynamically set a filter in angularjs在angularjs中动态设置过滤器
【发布时间】：2015-11-04 05:36:37
【问题描述】：

我想根据下拉列表中选择的条件过滤表格。在 newList 函数中写入 val 不会过滤表。任何建议如何通过这个。

HTML

<tbody>

  <tr ng-repeat="friendObj in newfriends">

    <td>{{friendObj.name}}</td>

    <td>{{friendObj.phone}}</td>

    <td>{{friendObj.age}}</td>
  </tr>

</tbody>

 $scope.newList = function (val) {
      alert(val);
$scope.newfriends = $filter('filter')($scope.friends, {
    val: $scope.searcha
})

【问题讨论】：

Plunkr 链接：plnkr.co/edit/3yOmiIJ9Yu9RfAgmuVA7
如果您创建了像 search.name 这样的正确搜索模型，那么您不需要在控制器中使用$filter，请查看我的答案。

标签： javascript html angularjs angularjs-filter plunker

【解决方案1】：

根据您的代码，您尝试多次添加条件，然后您想使用这些条件进行过滤。

在您的 JSON 中只有 3 个属性。 {姓名、电话和年龄}。

因此，您的标准不应超过 3 行，并且不应有两次相同的内容。如果这样做，则需要构建自己的过滤器。使用以下代码

$scope.newList = function() {
  var searchBy = {};
  angular.forEach($scope.newCriteria, function(criteria, key) {
    searchBy[criteria.name] = criteria.value;
  });
  $scope.newfriends = $filter('filter')($scope.friends, searchBy);
}

和HTML如下

<div id="searchy">

<ul class="list-unstyled">
  <li style="display: inline-block" ng-repeat="crtia in newCriteria">
    <table>
      <tr>

        <td>
          <select ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
        </td>
        <td>
          <input ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" />
        </td>

      </tr>
    </table>
  </li>
</ul>  <button ng-click="searchy.generate()">Add Criteria</button> </div>

这是更新的 plunker。 http://plnkr.co/edit/r5OcI366dyvLQ24fFIje?p=preview.

【讨论】：

searchBy[value.name] = value.value;你能告诉我这句话是做什么的吗
newCriteria 是您的条件数组，其中包含多个 {name, value} 对象。在应用过滤器时，您需要构造一个像 {age: 18} 这样的对象。其中年龄是您的标准名称，18 是值。所以我做了。 searchBy[value.name] = value.value。 [这里第一个值为 newCriteria 的每个实例]，第二个值为 18（由用户输入）。修改代码示例以便更好地理解。

【解决方案2】：

可能您想根据下拉选择进行过滤，然后创建适当的搜索模型，例如

<select ng-model="selectedsearchcriteria"
        ng-options="searchopt for searchopt in searchcriteria "></select>

<!--When you select dropdown 'selectedsearchcriteria' update like 'name', 'age' and so on
then ng-model="search[selectedsearchcriteria]" forms like search.name, search.age and so on-->
<input name="search" ng-model="search[selectedsearchcriteria]" placeholder="{{selectedsearchcriteria}}" />

<!--Here 'filter:search:strict' filter like search.name it is like property based filter-->

<tr ng-repeat="friendObj in newfriends |filter:search:strict">

另外我认为你不需要在你的控制器中使用$filter('filter')

查看update plunker

【讨论】：

其实我必须在控制器中过滤
但是你写的$scope.newList = function()里面的代码不用在controller中过滤就可以实现。如果要显示已选择的过滤器，请使用 search 对象。