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更改
<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,并开始应用筛选。
相关文章:
- 无法在启用视差的页面中单击锚链接
- 无法在第一次单击时禁用链接,并在动画完成后重新启用
- 如何在用户单击共享时禁用共享按钮,并在3小时后启用
- 单击每个表格行中的复选框时启用文本框
- 启用/禁用按钮,单击并执行 SQL 时会发生变化
- Jquery Resize问题.如果宽度小于768宽度,请启用“单击选项”.768以上鼠标悬停选项启用
- 如何在只单击一个星形按钮的情况下启用禁用按钮
- 如何使用JavaScript启用右键单击
- 如何启用事件单击仅在指定的小时范围内
- 单击文本框后启用提交按钮
- 在 Javascript 中启用/禁用按钮单击处理程序
- 启用下拉列表仅在单击后悬停
- 如何通过单击浏览器右上角的图像来启用/禁用自定义 chrome 扩展程序
- 如何禁用和启用没有特定处理程序名称的单击事件
- 在图像单击时启用 Javascript 功能
- 启用和禁用 jquery 可排序在单击时
- 当在asp.net web应用程序中单击启用了onserverclick的html按钮时,停止表单提交
- 单击“启用”按钮
- 单击启用单击的图像并禁用其他图像
- HTML / Javascript:单击启用/取消禁用输入字段