Question

我正在开发角度应用程序，我正在使用带有键和值的数据对象，请参阅下面的

var data=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"},
                            {key:"product",value:"pk1"},{key:"product",value:"pk2"},{key:"product",value:"pk3"},{key:"product",value:"pk4"},
                            {key:"service",value:"sk1"},{key:"service",value:"sk2"},{key:"service",value:"sk3"},{key:"service",value:"sk4"},
                            ];

我的页面是

<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>Angular Boiler Plate</title>
        <script src="/angular.js"></script>
        <script>
        var app=angular.module('myApp',[]);
        function mainCtrl($scope){
            $scope.Maindata=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"},
                            {key:"product",value:"pk1"},{key:"product",value:"hk2"},{key:"product",value:"hk3"},{key:"product",value:"hk4"},
                            {key:"service",value:"sk1"},{key:"service",value:"hk2"},{key:"service",value:"hk3"},{key:"service",value:"hk4"},
                            ];


        }
        </script>
    </head>

    <body ng-controller="mainCtrl">

        <h2 ng-repeat="data in Maindata" class="">
            {{data.key}}
            <div ng-repeat="">{{data.value}}</div>
        </h2>


    </body>
</html>

我想将具有相同键的对象分成一个单独的对象，如

var filtereddata=[{"home":"[{value:"hk1"},{value:"hk2"},{value:"hk3"},{value:"hk4"}]"},
                  {"product":"[{value:"pk1"},{value:"pk2"},{value:"pk3"},{value:"pk4"}]"},
                  {"service":"[{value:"sk1"},{value:"sk2"},{value:"sk3"},{value:"sk4"}]"},
                 ]

这样我就可以在页面中一次使用“home”，“service”和“product”作为标题，并使用ng-repeat将每个标题中的值重复到列表中。

在这里，我将使用两个ng-repeat一个标题，即家庭，服务和产品。另一个迭代每个标题中的数据。

请使用过滤器帮助我实现此目的。提前感谢您的帮助。

Answer 1

我现在不能使用Plunker进行演示（GitHub登录问题）

编辑：我为现场演示创建了一个JSBIN：http://jsbin.com/uzUtifi/1/edit?html,js,output

编辑：使用过滤器并指定要列为keyToDisplay的键

<强> JS

 $scope.keyToDisplay = 'home';

<强> HTML

<h2 ng-repeat="data in Maindata | filter:{'key':keyToDisplay}" >
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>

<强>上

如果您可以包含lodash库（http://lodash.com/），则可以在重复使用之前重新设计数据的格式。

例如：使用_.groupBy（http://lodash.com/docs#groupBy）

var data = [
    {key:"home",value:"hk1"},
    {key:"home",value:"hk2"},
    {key:"home",value:"hk3"},
    {key:"home",value:"hk4"},
    {key:"product",value:"pk1"},
    {key:"product",value:"hk2"},
    {key:"product",value:"hk3"},
    {key:"product",value:"hk4"},
    {key:"service",value:"sk1"},
    {key:"service",value:"hk2"},
    {key:"service",value:"hk3"},
    {key:"service",value:"hk4"},
];

$scope.filteredData = _.groupBy(data, 'key');

FilteredData应如下所示：

{
    "home": [
        {key:"home",value:"hk1"},
        {key:"home",value:"hk2"},
        {key:"home",value:"hk3"},
        {key:"home",value:"hk4"}
    ],
    "product": [
        {key:"product",value:"pk1"},
        {key:"product",value:"hk2"},
        {key:"product",value:"hk3"},
        {key:"product",value:"hk4"}
    ],
    "service": [
        {key:"service",value:"sk1"},
        {key:"service",value:"hk2"},
        {key:"service",value:"hk3"},
        {key:"service",value:"hk4"},
    ]
};

然后你可以这样做：

<h2 ng-repeat="data in filteredData.home">
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>

仅显示房屋价值。

Answer 2

我没有对此进行测试，但它应该以原则的方式工作。

var filteredData = Array();

// helper function to check whether a key
// has already been added to the filteredData 
// array. If yes, return the index. -1 if no
function keyIndex(key, filteredData) {
    for(var i=0; i < filteredData.length; i++) {
        if (key in filteredData[i]) {
            return i;
        }   
    };       
    return -1; 
}

// loop through main data and cosntruct the filtered one
$.each($scope.Maindata, function() {
    var index = keyIndex(this.key, filteredData);
    if (index > 0) {
        filteredData[index][this.key].push({"value" : this.value});
    } else {
        filteredData.push({this.key : [{"value" : this.value}]});
    }   
});

AngularJS Filter：将具有唯一ID的对象过滤到单独的Object中

2 个答案: