Angularjs过滤嵌套对象

zaj*_*jca 7 filter angularjs angularjs-filter

我有像这样的角度嵌套对象.有没有办法过滤它的嵌套属性

<li ng-repeat="shop in shops | filter:search">
search.locations.city_id = 22
Run Code Online (Sandbox Code Playgroud)

我只显示父元素,但想要同时过滤它们,例如:

search = 
  category_id: 2
  locations:
    city_id: 368

[
 name: "xxx"
 category_id: 1
 locations: [
   city_id: 368
   region_id: 4
  ,
   city_id: 368
   region_id: 4
  ,
   city_id: 368
   region_id: 4
  ]
,
 name: "xxx"
 category_id: 2
 locations: [
   city_id: 30
   region_id: 4
  ,
   city_id: 22
   region_id: 2
  ]
]
Run Code Online (Sandbox Code Playgroud)

mar*_*oss 23

您也可以像这样过滤(版本1.2.13+)

<li ng-repeat="shop in shops | filter: { locations: [{ city_id: search.locations.city_id }] }">
Run Code Online (Sandbox Code Playgroud)

  • 请注意标准过滤器将值作为从开头匹配它们的字符串进行比较.如果您请求city_id 1,它将返回位于城市中的商店,其中包含ID 10,15或12345.此外,它还将仅搜索数组中的第一个对象.为避免这种情况,您需要编写自己的比较器或过滤器.参见示例:http://plnkr.co/edit/Jirxxi (4认同)
  • @zajca你可以通过在控制器中为模型分配一个值来解决这个问题:`$ scope.selectedCityId =''`.这具有在手动更改输入之前加载所有项目的效果 (2认同)

Wor*_*red 9

是的,如果我理解你的例子,你可以.

根据集合的大小,计算迭代的集合可能会更好,ng-repeat这样过滤器就不会随着模型的变化而不断地进行.

http://jsfiddle.net/suCWn/

如果我理解正确的话,基本上你会做这样的事情:

$scope.search = function (shop) {

    if ($scope.selectedCityId === undefined || $scope.selectedCityId.length === 0) {
        return true;
    }

    var found = false;
    angular.forEach(shop.locations, function (location) {          
        if (location.city_id === parseInt($scope.selectedCityId)) {
            found = true;
        }
    });

    return found;
};
Run Code Online (Sandbox Code Playgroud)