angularjs:将值传递给自定义过滤器以在单击下拉菜单时启用它
angularjs: passing value to custom filter to enable it on dropdown click
我有一些数据。默认情况下,应显示所有数据,但当用户单击下拉列表中的某个值时,只有过滤器应开始过滤数据。
为此,我遵循以下方法。
我的滤镜是这样的
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-change
<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)从控制器推送到过滤器,(我也试过这个 - Passing arguments to angularjs filters 但没有用)这样当用户点击下拉菜单时,只有过滤器开始过滤数据。
我的控制器是-
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"
}];
}])
这是我的笨蛋 (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 并且过滤器开始应用。
我有一些数据。默认情况下,应显示所有数据,但当用户单击下拉列表中的某个值时,只有过滤器应开始过滤数据。 为此,我遵循以下方法。
我的滤镜是这样的
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-change
<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)从控制器推送到过滤器,(我也试过这个 - Passing arguments to angularjs filters 但没有用)这样当用户点击下拉菜单时,只有过滤器开始过滤数据。 我的控制器是-
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"
}];
}])
这是我的笨蛋 (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 并且过滤器开始应用。