AngularJS过滤器不过滤答案

【问题标题】：AngularJS filter not filteringAngularJS过滤器不过滤
【发布时间】：2014-10-13 12:04:53
【问题描述】：

所以我试图在另一个过滤器中使用一个过滤器来过滤掉现有标记列表中的禁用类别。首先我观察类别（组）然后我观察 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);

这是 2 条日志这是由多个切换和工作维护的组选择日志：

[
  {
    "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 仍然作为 groupselection.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"
  },
]

【问题讨论】：

标签： javascript json angularjs filter

【解决方案1】：

在表达式中必须是 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>

【讨论】：

它不是一个搜索字段，它是一个切换，我不能在标记指令上使用 ng-repeat，因为它是创建标记的不同方法。我把它修好了
这里的搜索和 ng-repeat 只是为了显示过滤器正在工作。
是的，它可以在 ng-repeat 中工作，但我是用纯 JavaScript 做的，这意味着你必须使用 $scope 来访问变量