angular 过滤器中具有多个属性的 GroupBy

Question

我有如下 json 数据 [{ "id": 1, "address": "MG Road", "country": INDIA, "state": AP, "city": VIJ }, { "id": 2, "address": "Miyapur", "country": INDIA, "state": TS, "city": HYD }, { "id": 3, "address": "Autonagar", "country": INDIA, "state": AP, "city": VIJ }, { "id": 4, "address": "Kukatpalli", "country": INDIA, "state": TS, "city": HYD }, { "id": 5, "address": "Koti", "country": INDIA, "state": TS, "city": HYD } ]

我要显示如下格式

IND,TS,HYD
米亚普尔、科蒂、库卡特帕里
IND,AP,VIJ,
MG 路，Autonagar

为此，我使用如下所示的 groupBy 过滤器，但我无法对这些值进行分组

这是我的代码

     <div class="location-container">
            <label ng-repeat="(key,value) in locationmodel | groupBy: '[country,state,city]'">{{key}}
            </label>
            <span ng-repeat="location in value">{{location.address}}</span>
      </div>

但是使用上面的代码我无法得到我所期望的。请帮我解决这个问题。

提前致谢

Answer 1

如果你喜欢，你可以试试这个来获得你的输出

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   var myApp = angular.module('myApp', []);
   myApp.controller('myAppCtrl', function ($scope) {
    var locationmodel = [{
      "id" : 1,
      "address" : "MG Road",
      "country" : "INDIA",
      "state" : "AP",
      "city" : "VIJ"
     }, {
      "id" : 2,
      "address" : "Miyapur",
      "country" : "INDIA",
      "state" : "TS",
      "city" : "HYD"
     }, {
      "id" : 3,
      "address" : "Autonagar",
      "country" : "INDIA",
      "state" : "AP",
      "city" : "VIJ"
     }, {
      "id" : 4,
      "address" : "Kukatpalli",
      "country" : "INDIA",
      "state" : "TS",
      "city" : "HYD"
     }, {
      "id" : 5,
      "address" : "Koti",
      "country" : "INDIA",
      "state" : "TS",
      "city" : "HYD"
     }
    ];
    var resultObj = {};
    for (var i = 0; i < locationmodel.length; i++) {
     if (resultObj[locationmodel[i].country + ',' + locationmodel[i].state + ',' + locationmodel[i].city])
      resultObj[locationmodel[i].country + ',' + locationmodel[i].state + ',' + locationmodel[i].city].address.push(locationmodel[i].address);
     else
      resultObj[locationmodel[i].country + ',' + locationmodel[i].state + ',' + locationmodel[i].city] = {
       address : [locationmodel[i].address]
      };
    }

 $scope.result=resultObj;
   });
</script>
<body ng-app="myApp" ng-controller='myAppCtrl'>
 <div class="location-container" ng-repeat="(key,value) in result">
  <label >{{key}}</label><br>
  <span>{{value.address.join()}}</span>
 </div>
</body>

Answer 2

解决方法如下： https://jsfiddle.net/mqt0xjjc/

HTML:

<div ng-app="myApp">
<div  ng-controller="Main">
    <div ng-repeat=" (groupedBy, groupedItems) in locationmodelGrouped">
        <b>{{groupedBy}}</b>
        <li ng-repeat="item in groupedItems">{{item.address}}</li>        
    </div>
</div>
</div>

JS:

angular.module('myApp', []).controller( 'Main', 
function($scope) {
    function groupBy(items, groupByAttrs) {
        const retVal = items.reduce(
          function (sum, item) {
            const key = groupByAttrs.map( attr => item[attr]).join(',');
            sum[key] = sum[key] || [];
            sum[key].push(item);
            return sum;
          },
          {}
         );
      return retVal;
    };

    $scope.$watch('locationmodel',
        function () {
        $scope.locationmodelGrouped = groupBy($scope.locationmodel, ['country','state','city'])
      }
   )

$scope.locationmodel = [{
    "id": 1,
    "address": "MG Road",
    "country": 'INDIA',
    "state": 'AP',
    "city": 'VIJ'
},
{
    "id": 2,
    "address": "Miyapur",
    "country": 'INDIA',
    "state": 'TS',
    "city": 'HYD'
},
{
    "id": 3,
    "address": "Autonagar",
    "country": 'INDIA',
    "state": 'AP',
    "city": 'VIJ'
},
{
    "id": 4,
    "address": "Kukatpalli",
    "country": 'INDIA',
    "state": 'TS',
    "city": 'HYD'
},
{
    "id": 5,
    "address": "Koti",
    "country": 'INDIA',
    "state": 'TS',
    "city": 'HYD'
}
];

});

angular 过滤器中具有多个属性的 GroupBy

GroupBy with multiple attributes in angular filter

javascript

angularjs

ng-repeat

angularjs-ng-repeat

angularjs-filter