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

我希望在点击＆＃34;过滤器时触发过滤器＆＃34;按钮

有可能吗？

非常感谢！

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和您在此处发布的代码存在一些差异。其次，您使用的两个数组没有任何共同之处，因此出于演示目的，我已经更改了将用作过滤器的第二个数组的结构。

首先，将Array过滤器与选择下拉列表的模型值分离。

    <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.

仅在单击时触发过滤器

2 个答案: