AngularJS过滤器未进行过滤
AngularJS filter not filtering
所以我试图在另一个过滤器中使用一个过滤器来过滤掉现有标记列表中禁用的类别。首先我观察类别（组），然后我观察subcatvan（subcat from）是$scope.groupselection.id上的标记，并将新标记放入数组中。问题是第二个过滤器不起作用。这是我当前的代码：
//Array for active categories
$scope.groupselection = [];
// watch categories for changes
$scope.$watch('groups|filter:{selected:true}', function (nv) {
//add or remove group from active categories
$scope.groupselection = nv.map(function (group) {
return group;
});
//watch markers to see if hoofdcat is still in the groupselection id's
$scope.$watch('map.markers | filter:{hoofdcat : $scope.groupselection.id}',function(newmarkers){
$scope.filteredmarkers = newmarkers;
console.log($scope.groupselection);
console.log($scope.filteredmarkers);
}, true);
}, true);
这是两个日志这是组选择的日志，它由多个开关维护并工作：
[
{
"id": "1",
"name": "WE<3STACKOVERFLOW",
"icon": "WE<3STACKOVERFLOW.png",
"selected": true,
"items": [
{
"id": "2",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "1",
"priority": "0",
"color": "#",
},
{
"id": "3",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "1",
"priority": "0",
"color": "#",
},
{
"id": "4",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "1",
"priority": "0",
"color": "#",
},
{
"id": "5",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "1",
"priority": "0",
"color": "#",
},
{
"id": "6",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "1",
"priority": "0",
"color": "#",
},
{
"id": "7",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "1",
"priority": "0",
"color": "#",
}
],
"$$hashKey": "00U"
},
{
"id": "8",
"name": "WE<3STACKOVERFLOW",
"icon": "WE<3STACKOVERFLOW",
"selected": true,
"items": [
{
"id": "9",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "10",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "11",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "12",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "13",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "14",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "15",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "16",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
},
{
"id": "17",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "8",
"priority": "0",
"color": "#",
}
],
"$$hashKey": "00V"
},
{
"id": "18",
"name": "WE<3STACKOVERFLOW",
"icon": "WE<3STACKOVERFLOW",
"selected": true,
"items": [
{
"id": "19",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "18",
"priority": "0",
"color": "#",
},
{
"id": "20",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "18",
"priority": "0",
"color": "#",
},
{
"id": "21",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "18",
"priority": "0",
"color": "#",
},
{
"id": "22",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "18",
"priority": "0",
"color": "#",
},
{
"id": "23",
"category": "WE<3STACKOVERFLOW",
"level": "1",
"subcatvan": "18",
"priority": "0",
"color": "#",
}
],
"$$hashKey": "00W"
}
]
这是标记的日志，如果hoofdcat作为一个组选择仍然存在，它似乎会被忽略。id:
[
{
"id": "2290",
"latitude": 51.8434803826,
"longitude": 4.33258295059,
"icon": {
"scaledSize": {
"width": 1,
"height": 1,
"D": "px",
"I": "px"
}
},
"title": "WE<3STACKOVERFLOW",
"distance": "200m",
"hoofdcat": "24",
"reactiecount": "0",
"likecount": "0",
"showWindow": false,
"options": {
"labelContent": "200m<br />9-10",
"labelAnchor": "36 61",
"labelClass": "labelClass",
"labelStyle": {
"background-size": "36.5px 61px",
"background-position": "top left",
"background-repeat": "no-repeat"
},
"labelInBackground": false
},
"$$hashKey": "01U"
},
{
"id": "2215",
"latitude": 51.8416906784,
"longitude": 4.33402061462,
"icon": {
"scaledSize": {
"width": 1,
"height": 1,
"D": "px",
"I": "px"
}
},
"title": "WE<3STACKOVERFLOW",
"distance": "27m",
"hoofdcat": "41",
"reactiecount": "1",
"likecount": "0",
"showWindow": false,
"options": {
"labelContent": "27m<br />8-10",
"labelAnchor": "36 61",
"labelClass": "labelClass",
"labelStyle": {
"background-size": "36.5px 61px",
"background-position": "top left",
"background-repeat": "no-repeat"
},
"labelInBackground": false
},
"$$hashKey": "01V"
},
{
"id": "2216",
"latitude": 51.8428573085,
"longitude": 4.33213233948,
"icon": {
"scaledSize": {
"width": 1,
"height": 1,
"D": "px",
"I": "px"
}
},
"title": "WE<3STACKOVERFLOW",
"distance": "168m",
"hoofdcat": "49",
"reactiecount": "1",
"likecount": "0",
"showWindow": false,
"options": {
"labelContent": "168m<br />8-10",
"labelAnchor": "36 61",
"labelClass": "labelClass",
"labelStyle": {
"background-size": "36.5px 61px",
"background-position": "top left",
"background-repeat": "no-repeat"
},
"labelInBackground": false
},
"$$hashKey": "01W"
},
{
"id": "2434",
"latitude": 51.8458031,
"longitude": 4.3463394000000335,
"icon": {
"scaledSize": {
"width": 1,
"height": 1,
"D": "px",
"I": "px"
}
},
"title": "WE<3STACKOVERFLOW",
"distance": "948m",
"hoofdcat": "0",
"reactiecount": "0",
"likecount": "0",
"showWindow": false,
"options": {
"labelContent": "948m<br />12-10",
"labelAnchor": "36 61",
"labelClass": "labelClass",
"labelStyle": {
"background-size": "36.5px 61px",
"background-position": "top left",
"background-repeat": "no-repeat"
},
"labelInBackground": false
},
"$$hashKey": "01X"
},
{
"id": "2314",
"latitude": 51.8390093,
"longitude": 4.331307199999969,
"icon": {
"scaledSize": {
"width": 1,
"height": 1,
"D": "px",
"I": "px"
}
},
"title": "WE<3STACKOVERFLOW",
"distance": "376m",
"hoofdcat": "0",
"reactiecount": "0",
"likecount": "0",
"showWindow": false,
"options": {
"labelContent": "376m<br />10-10",
"labelAnchor": "36 61",
"labelClass": "labelClass",
"labelStyle": {
"background-size": "36.5px 61px",
"background-position": "top left",
"background-repeat": "no-repeat"
},
"labelInBackground": false
},
"$$hashKey": "01Y"
},
{
"id": "2375",
"latitude": 51.8463305052,
"longitude": 4.32200431824,
"icon": {
"scaledSize": {
"width": 1,
"height": 1,
"D": "px",
"I": "px"
}
},
"title": "WE<3STACKOVERFLOW",
"distance": "963m",
"hoofdcat": "41",
"reactiecount": "0",
"likecount": "0",
"showWindow": false,
"options": {
"labelContent": "963m<br />10-10",
"labelAnchor": "36 61",
"labelClass": "labelClass",
"labelStyle": {
"background-size": "36.5px 61px",
"background-position": "top left",
"background-repeat": "no-repeat"
},
"labelInBackground": false
},
"$$hashKey": "01Z"
},
]
表达式中必须是groupselection.id，而不是$scope.groupselection.id。示例：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://raw.githubusercontent.com/arunisrael/angularjs-geolocation/master/dist/angularjs-geolocation.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry,places"></script>
<style>
.check-yes {
background-color: green;
}
</style>
</head>
<body ng-app="plunker">
<div id="map-canvas"></div>
<div ng-controller="searchController">
<input type="text" ng-model="groupselection.id">
<ul>
<li ng-repeat="marker in filteredmarkers">
{{marker}}
</li>
</ul>
</div>
<script>
var app = angular.module('plunker', ['geolocation']);
app.controller('searchController', ['$scope', function($scope){
//Array for active categories
$scope.groups = [
{
"id": "2290",
"selected": false,
"title": "WE<3STACKOVERFLOW",
"hoofdcat": "24"
},
{
"id": "2215",
"selected": true,
"title": "WE<3STACKOVERFLOW",
"hoofdcat": "41"
},
{
"id": "2216",
"selected": true,
"title": "WE<3STACKOVERFLOW",
"hoofdcat": "49"
},
{
"id": "2434",
"selected": true,
"title": "WE<3STACKOVERFLOW",
"hoofdcat": "0"
},
{
"id": "2314",
"selected": true,
"title": "WE<3STACKOVERFLOW",
"hoofdcat": "0"
},
{
"id": "2375",
"selected": true,
"title": "WE<3STACKOVERFLOW",
"hoofdcat": "41",
}
];
// watch categories for changes
$scope.$watch('groups|filter:{selected:true}', function (nv) {
//watch markers to see if hoofdcat is still in the groupselection id's
$scope.nv = nv;
$scope.groupselection = {
'id': 41
};
$scope.$watch('nv | filter:{hoofdcat : groupselection.id}',
function(newmarkers){
$scope.filteredmarkers = newmarkers;
}, true);
}, true);
}]);
</script>
</body>
</html>相关文章：
- 为什么我的d3.jsselectAll+过滤器没有过滤
- ui网格日期单元格过滤器，过滤日期格式导致显示错误的日期
- 如何应用带过滤器的ng if来过滤记录，并在同一页面中显示两个不同的视图
- 使用angularjs内置过滤器过滤代码中的特定属性
- JSON 填充的表单元素不使用 angularJs 过滤器进行过滤
- Angular自定义过滤器在处理某些匹配时注销，但会过滤掉所有结果
- 角度过滤器在1.3版本中过滤不正确，在1.5版本中更好吗
- JavaScript 过滤器方法返回过滤数组和空数组
- 在初始加载时获取带有 postData 过滤器的 jqGrid，以仅显示客户端过滤行
- 余烬过滤内容并在过滤器中使用控制器方法
- 如何使用 Angularjs 过滤器来过滤绑定到两个选择框的数组
- AngularJS 过滤器:将具有唯一 ID 的对象过滤到单独的对象中
- Angular JS 搜索过滤器不会使用 Firebase 过滤数据
- 使用过滤器和下划线过滤对象数组
- 有没有办法在 angularjs 过滤器中显示过滤数组的属性
- 主干过滤产品在每个类别中(过滤器参数将是类别名称）
- MySQL中用于AngularJS日期过滤器过滤的日期格式
- 如何在Angular js中基于两个自定义过滤器过滤数据
- 如何实现过滤过滤器通过搜索多个属性值在javascript
- 是否有IndexedDB的文本过滤过滤器
