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>

同じキーを持つオブジェクトを 1 つの別のオブジェクトに分割したい

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"}]"},
                 ]

「ホーム」、「サービス」、「製品」をヘッダーとしてページで一度使用し、ng-repeat を使用して各ヘッダーに存在する値をリストに反復できるようにします。

ここでは ng-repeat、home、service、product などのヘッダーに 1 つを 2 つ使用します。各ヘッダーでデータを反復する別の方法。

フィルターを使用してこれを達成するのを手伝ってください。助けてくれてありがとう。

4

2 に答える 2

2

現在、デモ用に Plunker を使用できません (GitHub サインインの問題)

編集:ライブ デモ用に JSBIN を作成しました: http://jsbin.com/uzUtifi/1/edit?html,js,output

EDIT：フィルターを使用して、リストするキーを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 に答える