0

I have a some data. By default all data should be shown up but when user click on some value in the drop-down then only the filter should start filtering the data. To do so I am following the below approach.

My filter is like this

filter('myFilter', function() {
    return function(data, userInput) {
      var filteredArray = [];

      // this show whole data
      if (true) {/*want to insert enableFilter variable here*/
        angular.forEach(data, function(dataobj, key) {
          console.log(dataobj);
          filteredArray.push(dataobj);
        })

      } 
//this show filtered data
      else {
        angular.forEach(userInput, function(value, key) {
          angular.forEach(data, function(dataobj, key) {
            if (dataobj.type.indexOf(value) > -1 && filteredArray.indexOf(dataobj) == -1) {
              filteredArray.push(dataobj);
            }
          })
        });
      }
      return filteredArray;

    }
  });

To get the user click event I am using ng-change like this

<select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" ng-change=click() multiple>
<option value="classA">Class A</option>
<option value="classB">Class B</option>
<option value="classC">Class C</option>
<option value="classD">Class D</option>
<option value="classE">Class E</option>

Now how can I push the value (i.e. enableFilter) from controller to filter,(I also tried this - Passing arguments to angularjs filters but didn't work ) so that when user click on the drop down then only filter start filtering the data. My controller is-

 angular.module('myapp', [])
  .controller('myController', ['$scope', function($scope) {
    enableFilter = true;
    $scope.enableFilter = true;

    /*On user click*/
    $scope.click = function() {
      console.log("user click");
      enableFilter = false;
      console.log(enableFilter);
    };
    $scope.data = {
      multipleSelect: []
    };
   //data
    $scope.data = [{
      "id": "1",
      "type": ["classA", "classB", "classC"],
      "name": "Name 1"
    }, {
      "id": "2",
      "type": ["classB", "classC", "classE"],
      "name": "Name 2"
    }, {
      "id": "3",
      "type": ["classC"],
      "name": "Name 3"
    }, {
      "id": "4",
      "type": ["classD", "classC"],
      "name": "Name 4"
    }, {
      "id": "5",
      "type": ["classA", "classB", "classC", "classD", "classE"],
      "name": "Name 5"
    }];
  }])

here is my plunker (http://plnkr.co/edit/QlSe8wYFdRBvK1uM6RY1?p=preview)

Community
  • 1
  • 1
saurabhkumar
  • 17
  • 1
  • 4
  • I think you need to read a bit about filters and how they are used. I don't see you using the filter anywhere in your code. https://docs.angularjs.org/guide/filter – Lenny Oct 03 '15 at 08:11

1 Answers1

0
if (true) {/*want to insert enableFilter variable here*/

Change true to false for filters codde to work.

The way you wanted :

http://plnkr.co/edit/70jTmSFwtjQ4Nbnb7EVY?p=preview

I have passed a scope param to filter and initially it is set to true and when user selects from the drop down it gets set to false and filter starts applying.

brute_force
  • 1,141
  • 7
  • 12