angularjs - 仅在点击时触发过滤器

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

我希望在点击“过滤器”按钮时触发过滤器

这可能吗？

非常感谢!

Answer 1

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

您想解耦 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}">
  

在你的 Controller 中:

• 创建使用无效 ID 初始化的新属性:

  $scope.currentAnnee = {
      "id": 0
  };
  

• 创建 submit()从 <select> 设置新属性的函数元素的 ng-model :

  $scope.submit = function() {
      $scope.currentAnnee = $scope.annee;
  };
  

查看此 Plunker一个完整的例子。