仅在点击时触发过滤器

Question

我有一个数据列表，这个数据是通过下拉菜单过滤的。

问题是，我希望过滤仅在单击按钮时触发，而不是在下拉列表更改时触发。

<select ng-model="annee"  ng-options="annee.titre for annee in annees track by annee.id">

</select>
    <input type="submit" name="submit" value="Filtrer">
<ul>

  <li ng-repeat="x in accueils | filter:annee" > 
    {{x.titre}}
    <div  ng-bind-html="x.description  | to_trusted"></div> 
    {{x.date}}
    {{x.cout}} $
    {{x.participants}} participants

  </li>
</ul>

这是一个工作示例：

http://plnkr.co/edit/MbfrhdKfbTObybsQvxrR?p=preview

我希望在单击 "filter" 按钮时触发过滤器

可能吗？

非常感谢！

Answer 1

请注意，您在此处的过滤器代码与您的 Plunker 不匹配；在 Plunker 中是 filter:{annee:annee.id}。

您想将 ng-repeat 与 ng-model 分离。一种方法是根据新属性进行过滤，并仅在单击“过滤”按钮时更新属性。

在你的 HTML:

添加一个<form>元素并设置ng-submit在按下过滤器按钮时调用submit():
```
<form ng-app="myApp" ng-controller="customersCtrl" ng-submit="submit()">
```
更改 ng-repeat 过滤器以使用新的属性而不是 <select> 元素的 ng-model 使用的属性：
```
<li ng-repeat="x in accueils | filter:{annee:currentAnnee.id}">
```

在你的控制器中：

创建新的属性并用无效的 id 初始化：
```
$scope.currentAnnee = {
    "id": 0
};
```
创建一个 submit() 函数，从 <select> 元素的 ng-model:
设置新的属性
```
$scope.submit = function() {
    $scope.currentAnnee = $scope.annee;
};
```

查看此 Plunker 以获得完整示例。

Answer 2

正如@msmolens 所指出的，您的 plunker 和您在此处发布的代码存在一些差异。其次，您使用的两个数组没有任何共同点，因此出于演示目的，我更改了将用作过滤器的第二个数组的结构。

首先，将数组过滤器与 select 下拉列表的模型值分离。

    <select ng-model="annee"  ng-options="annee.date for annee in annees track by annee.id">
    </select>

    <input type="submit" name="submit" value="Filtrer" ng-click="filter()">

    <ul>

          <li ng-repeat="x in accueils | filter:filterExpr" > 
            {{x.titre}}
            <div  ng-bind-html="x.description  | to_trusted"></div> 
            {{x.date}}
            {{x.cout}} $
            {{x.participants}} participants

          </li>
    </ul>

如代码所示，我们在 ng-repeat 中有一个过滤器表达式的模型变量。

然后我们用空值初始化过滤器表达式。

    $scope.filterExpr = {"date" : ''};

之后，您只需要捕获过滤器按钮的 ng-click 并修改用作过滤器的变量。

    $scope.filter = function() {
      $scope.filterExpr = {"date" : $scope.annee.date};
    };

您可以找到更新的 plunker here.

仅在点击时触发过滤器

Trigger filter only on click

filter

angularjs