angularjs:将值传递给自定义过滤器,以便在下拉单击时启用它

angularjs: passing value to custom filter to enable it on dropdown click

本文关键字:单击 启用 值传 过滤器 自定义 angularjs      更新时间:2023-09-26

我有一些数据。默认情况下,所有数据都应该显示出来,但当用户单击下拉列表中的某个值时,只有过滤器才应该开始过滤数据。为此,我采取了以下方法。

我的过滤器就像这个

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;
    }
  });

为了获得用户点击事件,我正在使用类似的ng更改

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

现在,我如何将值(即enableFilter(从控制器推送到过滤器,(我也尝试过-将参数传递给angularjs过滤器,但没有成功(,这样当用户点击下拉菜单时,只有过滤器开始过滤数据。我的控制器是-

 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"
    }];
  }])

这是我的plunker(http://plnkr.co/edit/QlSe8wYFdRBvK1uM6RY1?p=preview)

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

将true更改为false,以使筛选器代码生效。

你想要的方式:

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

我已经传递了一个作用域参数来进行筛选,最初它被设置为true,当用户从下拉列表中选择时,它会被设置为false,并开始应用筛选。