问题 过滤嵌套ng-repeat内的复杂对象


我想在嵌套的ng-repeat中过滤对象。

HTML：

<div ng-controller="MyController">
<input type="text" ng-model="selectedCityId" />
<ul>
    <li ng-repeat="shop in shops">
      <p ng-repeat = "locations in shop.locations | filter:search" style="display: block">
          City id: {{ locations.city_id }}
          <span style="padding-left: 20px; display: block;" ng-repeat="detail in locations.details | filter:item">Pin code: {{detail.pin}}</span>
      </p>    
    </li>
</ul>

控制器：

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function ($scope) {

    $scope.search = function (location) {

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

           if (location.city_id === parseInt($scope.selectedCityId)) {
               return true;
            }
    };

    $scope.item = function (detail) {

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

    $scope.shops =
    [
       {
          "category_id":2,
          "locations":[
             {
                "city_id":368,
                "details": [{
                    "pin": 627718,
                  "state": 'MH'
                }]
             }
          ]
       },
       {
          "name":"xxx",
          "category_id":1,
          "locations":[
             {
                "city_id":400,
                "region_id":4,
                "details": [{
                    "pin": 627009,
                  "state": 'MH'
                },{
                    "pin": 129818,
                    "state": 'QA'
                }]
             },
          ]
       },
    ];

});

这是小提琴：

http://jsfiddle.net/suCWn/210/

我想在ng-repeat中使用多个过滤器。

示例：每当用户在输入框中输入ID时。该列表应根据cityID或PinCode进行过滤。 如果用户输入'129818'，它应显示129818的密码结果及其父cityID 同样，如果用户输入400，则列表应过滤并显示带有400的cityID结果及其子代码。

编辑：

更新代码 http://codepen.io/chiragshah_mb/pen/aZorMe?editors=1010]


8543
2018-05-24 13:54


起源

答案:

首先，您不得过滤具有匹配详细信息的位置。在这里使用这样的东西 search 过滤：

$scope.search = function (location) {
    var id = parseInt($scope.selectedCityId);
    return isNaN(id) || location.city_id === id || 
           location.details.some(function(d) { return d.pin === id });
};

要显示按cityID过滤的详细信息，您必须找到父级 location 并检查是否已过滤。

$scope.item = function (detail) {
    var id = parseInt($scope.selectedCityId);
    return isNaN(id) || detail.pin === id || locationMatches(detail, id);
};

function locationMatches(detail, id) {
    var location = locationByDetail(detail);
    return location && location.city_id === id;
}

function locationByDetail(detail) {
    var shops = $scope.shops;
    for(var iS = 0, eS = shops.length; iS != eS; iS++) {
      for(var iL = 0, eL = shops[iS].locations.length; iL != eL; iL++) {
        if (shops[iS].locations[iL].details.indexOf(detail) >= 0) {
          return shops[iS].locations[iL];
        }
      }
    }
}

编辑 另一个更灵活的解决方案是从ngRepeats中删除所有过滤器，并在您调用搜索文本的ngChange的方法中进行过滤。以下是此方法的基本结构。

myApp.controller('MyController', function($scope, $http) { 
  var defaultMenu = [];
  $scope.currentMenu = [];
  $scope.searchText = '';

  $http.get(/*...*/).then(function (menu) { defaultMenu = menu; } );

  $scope.onSearch = function() {
    if (!$scope.searchText) {
      $scope.currentMenu = defaultMenu  ;
    }
    else {
      // do your special filter logic here...
    }
  };
});

和模板：

<input type="text" ng-model="searchText" ng-change="onSearch()" />
<ul>
    <li ng-repeat="category in currentMenu">
      ...   
    </li>
</ul>

6
2018-05-24 14:12


通过城市ID过滤也应该显示它的密码。 - chirag shah
@chiragshah如果用pin码搜索，是否应该隐藏其他孩子？ - hansmaad
是。它应该隐藏其他孩子 - chirag shah
@chiragshah有点难看，但应该工作。 （出于某种原因，我再也无法更新小提琴...） - hansmaad
似乎运作良好。唯一的问题是$ scope.shops在初始页面加载后更新（$ http响应对象），由于某种原因禁用了项目过滤器。你可以提供同样的小提琴吗？ - chirag shah

答案:

首先，您不得过滤具有匹配详细信息的位置。在这里使用这样的东西 search 过滤：

$scope.search = function (location) {
    var id = parseInt($scope.selectedCityId);
    return isNaN(id) || location.city_id === id || 
           location.details.some(function(d) { return d.pin === id });
};

要显示按cityID过滤的详细信息，您必须找到父级 location 并检查是否已过滤。

$scope.item = function (detail) {
    var id = parseInt($scope.selectedCityId);
    return isNaN(id) || detail.pin === id || locationMatches(detail, id);
};

function locationMatches(detail, id) {
    var location = locationByDetail(detail);
    return location && location.city_id === id;
}

function locationByDetail(detail) {
    var shops = $scope.shops;
    for(var iS = 0, eS = shops.length; iS != eS; iS++) {
      for(var iL = 0, eL = shops[iS].locations.length; iL != eL; iL++) {
        if (shops[iS].locations[iL].details.indexOf(detail) >= 0) {
          return shops[iS].locations[iL];
        }
      }
    }
}

编辑 另一个更灵活的解决方案是从ngRepeats中删除所有过滤器，并在您调用搜索文本的ngChange的方法中进行过滤。以下是此方法的基本结构。

myApp.controller('MyController', function($scope, $http) { 
  var defaultMenu = [];
  $scope.currentMenu = [];
  $scope.searchText = '';

  $http.get(/*...*/).then(function (menu) { defaultMenu = menu; } );

  $scope.onSearch = function() {
    if (!$scope.searchText) {
      $scope.currentMenu = defaultMenu  ;
    }
    else {
      // do your special filter logic here...
    }
  };
});

和模板：

<input type="text" ng-model="searchText" ng-change="onSearch()" />
<ul>
    <li ng-repeat="category in currentMenu">
      ...   
    </li>
</ul>

6
2018-05-24 14:12


通过城市ID过滤也应该显示它的密码。 - chirag shah
@chiragshah如果用pin码搜索，是否应该隐藏其他孩子？ - hansmaad
是。它应该隐藏其他孩子 - chirag shah
@chiragshah有点难看，但应该工作。 （出于某种原因，我再也无法更新小提琴...） - hansmaad
似乎运作良好。唯一的问题是$ scope.shops在初始页面加载后更新（$ http响应对象），由于某种原因禁用了项目过滤器。你可以提供同样的小提琴吗？ - chirag shah

我已更新您的过滤器。问题出在你的身上 search 过滤你只检查city_id，你应该做的是：

  1. 检查键入的id是否为city_id
  2. 检查键入的id是否为a pid 给定位置的儿童细节

类似的事情 item 过滤：

  1. 检查键入的id是否为a pid 正在过滤的细节
  2. 检查键入的id是否为a city_id 传入的详细信息的父位置

这里有一个 工作jsFiddle。我希望这有帮助。


2
2018-05-27 08:51



通过简单地修改 JSON 包括 city_id 对于孩子，所以你不需要循环通过它来获得父母的 city_id，解决方案就像这样简单：

var myApp = angular.module('myApp', []);
myApp.controller('MyController', function ($scope) {
    $scope.search = function (location) {
        if (!$scope.selectedCityId)
            return true;
        //if user's input is contained within a city's id
        if (location.city_id.toString().indexOf($scope.selectedCityId) > -1)
            return true;
        for (var i = 0; i < location.details.length; i++)
            //if user's input is contained within a city's pin
            if (location.details[i].pin.toString().indexOf($scope.selectedCityId) > -1)
                return true;
    };

    $scope.item = function (detail) {
        if (!$scope.selectedCityId)
            return true;
        //if user's input is contained within a city's id
        if (detail.city_id.toString().indexOf($scope.selectedCityId) > -1)
            return true;
        //if user's input is contained within a city's pin
        if (detail.pin.toString().indexOf($scope.selectedCityId) > -1)
            return true;
    };

修改了JSON

$scope.shops=[{"category_id":2,"locations":[{"city_id":368,"details":[{"city_id":368,"pin":627718,"state":'MH'}]}]},{"name":"xxx","category_id":1,"locations":[{"city_id":400,"region_id":4,"details":[{"city_id":400,"pin":627009,"state":'MH'},{"city_id":400,"pin":129818,"state":'QA'}]},]},];});

如果直接修改了 JSON 是不可能的，你可以在此之后直接在这个控制器中修改它 $scope.shops = ...json... 声明：

for(var i=0; i<$scope.shops.length; i++)
    for(var j=0, cat=$scope.shops[i]; j<cat.locations.length; j++)
        for(var k=0, loc=cat.locations[j]; k<loc.details.length; k++)
            loc.details[k].city_id=loc.city_id;

工作小提琴： http://jsfiddle.net/87e314a0/


1
2018-06-01 22:38


codepen.io/chiragshah_mb/pen/aZorMe?editors=1010]   这是实际的用例。你能为此提供解决方案吗？ - chirag shah

我试图让解决方案更容易理解：

index.html：

<div ng-controller="MyController">
    <input type="text" ng-model="search.city_id" />
    <ul>
        <li ng-repeat="shop in shops">
          <p ng-repeat = "locations in shop.locations | filter:search.city_id" style="display: block">
              City id: {{ locations.city_id }}
              <span style="padding-left: 20px; display: block;" ng-repeat="detail in locations.details | filter:item">Pin code: {{detail.pin}}</span>
          </p>    
        </li>
    </ul>
</div>

app.js： 

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function ($scope) {
    $scope.shops =
[
   {
      "category_id":2,
      "locations":[
         {
            "city_id":368,
            "details": [{
                "pin": 627718,
              "state": 'MH'
            }]
         }
      ]
   },
   {
      "name":"xxx",
      "category_id":1,
      "locations":[
         {
            "city_id":400,
            "region_id":4,
            "details": [{
                "pin": 627009,
              "state": 'MH'
            },{
                "pin": 129818,
                            "state": 'QA'
            }]
         },
      ]
   },
];


});

这是小提琴： mySolution


1
2018-06-02 15:48



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来