Trigger filter only on click

Question

I have a list of data, this data is filtered by a dropdown menu.

The problem is, i want the filtering to be triggered only on a button click, not on the dropdown change.

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

Here is a working example :

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

I want the filter to be triggered on clicking on the "filter" button

Is it possible ?

Thanks a lot!

Answer 1

Note that your filter code here doesn't match your Plunker; it's filter:{annee:annee.id} in the Plunker.

You want to decouple the ng-repeat from the ng-model. One way to do this is to filter based on a new property and update that property only when the Filter button is clicked.

In your HTML:

• Add a <form> element and set ng-submit to call submit() when the Filter button is pressed:

  <form ng-app="myApp" ng-controller="customersCtrl" ng-submit="submit()">
  

• Change the ng-repeat filter to use a new property instead of the property used by the <select> element's ng-model:

  <li ng-repeat="x in accueils | filter:{annee:currentAnnee.id}">
  

In your controller:

• Create the new property initialized with an invalid id:

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

• Create a submit() function that sets the new property from the <select> element's ng-model:

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

See this Plunker for a complete example.