3

当仅限于一个属性时，我不知道如何清除基于选择的过滤器。这是数据：

  $scope.items = [
    {'name': 'Adam', 'fruit': 'apple'},
    {'name': 'Shelley', 'fruit': 'apple'},
    {'name': 'Barbara', 'fruit': 'plum'},
    {'name': 'Steve', 'fruit': 'Adam\'s apple'},
    {'name': 'Marty Appleton', 'fruit': 'onion'}
  ];

这就是我想要过滤它的方式，在 itemname属性中搜索过滤器的文本：

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

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

当我选择其中一个选项时，会按预期过滤列表。但是当我再次选择空的“无过滤器”选项时，显示的列表是空的。如果我不将过滤器限制为一个属性，即使用ng-model="select1"而不是ng-model="select1.name". 如果我改用文本输入，它也可以工作。

这是一个实际的工作示例 - 您会注意到您无法使用右下角的选择清除过滤器，但您可以使用所有其他元素。

http://codepen.io/anon/pen/vLHqa

我迷路了。我究竟做错了什么？

4

3 回答 3

3

改成：

<select class="problem" ng-model="select1" ng-options="item.name for item in items">

这将是工作。 http://codepen.io/anon/pen/qroJp

于 2013-09-02T14:34:47.657 回答
0

Angular 的最新（不稳定）版本引入了一个钩子，让您可以放入一个比较器函数，我想在其中放置我将要向您展示的内容。但是，我被困在 v1.0.7 上，所以我不得不用下面的方法来解决它。

问题是，即使用户在选择“空”选项时选择了一个空字符串，您要过滤的对象上的属性仍然存在，因此 Angular 的 $filter 将每个元素的匹配属性与该空字符串进行比较，而不是将该财产视为已移除。

因此，我在指令中添加了一个ng-change事件，该事件将从我的过滤器模板对象中删除该属性，从而重置过滤器。到目前为止一直为我工作！<select />

例子：

<!-- Assuming select1 is the filter template object, note the ng-change attribute added to your select element -->

<select ng-change="checkForClear( select1 )" ng-model="select1.name" ng-options="item.name as item.name for item in items" >
    <option value="">No filter</option>
</select>

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


<!-- Then, in your controller -->
<script>
  // Assuming your controller is set up...

  $scope.checkForClear = function( filterTemplate ){
      if( filterTemplate.name == null || filterTemplate.name === '' ){
          delete filterTemplate.name;  // <== THIS removes the property from the template filter and clears the filter for Angular
      }
  }
</script>
于 2013-09-03T20:15:23.863 回答
0

接受的答案不适用于您需要多个选择过滤器的情况，并且只能像任何一种全局方式一样工作。

当您将 ng-options 与显式选项一起使用时，会出现一些奇怪的行为。我发现在某些情况下，回到简单的 ng-repeat 会更好。

相反，您应该这样做：

  <select ng-model="select1.name">
    <option value="" selected>No filter</option>
    <option ng-repeat="item in items" ng-value="item.name">{{item.name}}</option>
  </select>

试试看 - 我分叉了你的 CodePen

这样，您可以有两个选择过滤器来选择两个属性。

 <select ng-model="select1.fruit">
    <option value="" selected>No filter</option>
    <option ng-repeat="item in items" ng-value="item.fruit">{{item.fruit}}</option>
  </select>
于 2014-12-07T12:23:09.443 回答