0

我正在开发 Angular 应用程序,我有带有键和值的数据对象,见下文

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用于标题,即主页、服务和产品。另一个用于迭代每个标头中的数据。

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

4

2 回答 2

2

我目前无法使用 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/ ),则可以在将数据用于 ng-repeat 之前重新设计数据的格式。

例如:使用 _.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>

仅显示房屋价值。

于 2013-10-08T17:08:52.850 回答
1

我没有对此进行测试,但原则上它应该以这种方式工作。

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}]});
    }   
});
于 2013-10-08T17:11:52.967 回答