Question

我正在尝试清除select中特定选项的过滤器。

我可以使用JSON中所需字段name中的其他选项来检索值。但是当我选择No Filter时，我希望它清除所有过滤器并显示整个JSON值。

以下是我的代码：

过滤任何东西：

          <select ng-model="select2.name" ng-options="item.name as item.name for item in items">
               <option value="">No filter</option>
          </select>
       </div>

        <div ng-repeat="item in items | filter: select2 ">
            {{ item.name }}: {{ item.fruit }}
        </div>
    </section>
  </body>
 </html>

Answer 1

您可以为该逻辑创建自己的自定义过滤器，

如果从下拉列表中选择的值为null，则可以按原样返回数组。

myApp.filter('filterServer', function () {
  return function (servers,initialState) {
  var filteredArray=[];
  if(!initialState)
    return servers;
  for (var k = 0; k < servers.length; ++k) {
    var server = servers[k];
    if (server.state == initialState) filteredArray.push(server);
    }
    return filteredArray;
  };
});

以下是演示示例http://fiddle.jshell.net/znhhw37v/1/

注意：我没有你的JSON所以我创建了样本来模拟你的需求。

Answer 2

如果过滤器表达式返回undefined，则过滤器将不适用。所以，您可以执行以下操作：

<div ng-repeat="item in listings | filter:(!!locationFilter || undefined) && {location: locationFilter}">
       {{item}}
</div>

＆＃13;

var app = angular.module('YourModule', []);

app.controller('MainCtrl', function($scope) {
  $scope.listings = [{location: "foo"}, {location: "bar"}];
  
  $scope.locations = ["foo", "bar", "xyz"];
});

＆＃13;

<!DOCTYPE html>
<html ng-app="YourModule">

  <head>
    <meta charset="utf-8" />
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <select ng-model="locationFilter" ng-options="l as l for l in locations">
      <option value="">all</option>
    </select>
    <div ng-repeat="item in listings | filter: (!!locationFilter || undefined) && {location: locationFilter}">{{item.location}}</div>
  </body>

</html>

＆＃13;

希望回答了你的问题。

Answer 3

您只需要使用select2.name作为要过滤的模型来更新过滤器。当您选择无过滤器时，模型变为＆＃34;＆＃34;并自动触发过滤器移除。

＆＃13;

<div>
  <select ng-model="select2.name" ng-options="item.name as item.name for item in items">
    <option value="">No filter</option>
  </select>
</div>

<div ng-repeat="item in items | filter: select2.name ">
  {{ item.name }}: {{ item.fruit }}
</div>

＆＃13;

当过滤器应用于特定JSON字段时，如何使用特定选择选项清除angularJS表达式中的过滤器？

3 个答案: