的GroupBy與角度濾波器

多個屬性我有一個像下面 [{ "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 } ]的GroupBy與角度濾波器

我想顯示像下面格式

IND，TS JSON數據，HYD
Miyapur， Koti，Kukatpalli
IND，AP，VIJ，
MG路，Autonagar

對於使用GROUPBY過濾象下面這樣的IM，但我無法組的值

這裏是我的代碼

 <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>

但隨着上面的代碼，我是無法得到我所期望的。請幫我解決這個問題。

在此先感謝

來源

2016-09-15 user2451830

如果你喜歡，你可以試試這個讓你的輸出

<!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>

來源

2016-09-15 07:22:15

工作完美:)謝謝你這麼多 – user2451830

這裏是一個解決方案： 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' 
} 
]; 

});

來源

2016-09-15 07:45:19

的GroupBy與角度濾波器

回答

相關問題