Question

我目前正在学习angularjs，而且我已经被这个阻止了在我的控制器范围内考虑这个json结构：

var days = {
    "0":{
        "date":"2015-08-06",
        "data":[
            { "_id":"1", "a":"FOO", "b":"BAR", "id":"77" },
            { "_id":"1", "a":"dummy", "b":"data", "id":"22" },
            { "_id":"2", "a":"foo", "b":"bar", "id":"12" },
            { "_id":"3", "a":"DUMMY", "b":"DATA", "id":"124" },
            { "_id":"3", "a":"HELLO", "b":"WORLD", "id":"35" },
            { "_id":"3", "a":"hello", "b":"world", "id":"35" }
        ] 
    },
    "1":{
        "date":"2015-08-07",
        "data":[
            { "_id":"1", "a":"john", "b":"doe", "id":"2" },
            { "_id":"2", "a":"JOHN", "b":"DOE", "id":"55" },
            { "_id":"2", "a":"bruce", "b":"lee", "id":"241" },
            { "_id":"2", "a":"BRUCE", "b":"LEE", "id":"321" },
            { "_id":"3", "a":"bruce", "b":"wayne", "id":"45" }
        ]
    }
};

var infos = {
    "1": {"aa":"Message from infos 1"},
    "2": {"aa":"Message from infos 2"},
    "3": {"aa":"Message from infos 3"}
};

在我的视图中使用这个json的最佳方法是获得类似的东西：

<div ng-repeat="day in days">
    <h2>{{day.date}}</h2>
    <!-- 
        here for each value of day.data._id, I'd would like a new list 
        so for the first day.data it would be
    -->
    <div>  <!-- _id = 1 -->
        <h3>
            <!-- here, the message from infos.1.aa -->
        </h3>
        <ul> 
            <li>FOO BAR</li>
            <li>dummy data</li>
        </ul>
    </div>
    <div> <!-- _id = 2 -->
        <h3>
           <!-- here, the message from infos.2.aa --> 
        </h3>
        <ul> 
            <li>foo bar</li>
        </ul>
    </div>
    <div> <!-- _id = 3 -->
        <h3>
            <!-- here, the message from infos.3.aa -->
        </h3>
        <ul> 
            <li>DUMMY DATA</li>
            <li>HELLO WORLD</li>
            <li>hello world</li>
        </ul>
    </div>
</div>

最好使用自定义过滤器还是修改数据？

我无法想象如何实现这一目标。任何帮助将不胜感激

Answer 1

也许这不是最好的方法，但你可以试试这个：

http://plnkr.co/edit/ODl5txALU1V8drxbQeE2?p=preview

HTML：

<div ng-repeat="day in days">
    <h2>{{day.date}}</h2>
    <div ng-repeat="(key, value) in day.data | groupBy: '_id'">
        <h3>
            {{infos[value].aa}}
        </h3>
        <ul> 
            <li ng-repeat="data in day.data | filter: {_id: value}">{{data.a}} {{data.b}}</li>
        </ul>
    </div>
</div>

FILTER：

var uniqueItems = function (data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};


app.filter('groupBy', function () {
    return function (collection, key) {
        if (collection === null) return;
        return uniqueItems(collection, key);
    };
});

JSON DATA：

$scope.days = {
    "0":{
        "date":"2015-08-06",
        "data":[
            { "_id":"1", "a":"FOO", "b":"BAR", "id":"77" },
            { "_id":"1", "a":"dummy", "b":"data", "id":"22" },
            { "_id":"2", "a":"foo", "b":"bar", "id":"12" },
            { "_id":"3", "a":"DUMMY", "b":"DATA", "id":"124" },
            { "_id":"3", "a":"HELLO", "b":"WORLD", "id":"35" },
            { "_id":"3", "a":"hello", "b":"world", "id":"35" }
        ] 
    },
    "1":{
        "date":"2015-08-07",
        "data":[
            { "_id":"1", "a":"john", "b":"doe", "id":"2" },
            { "_id":"2", "a":"JOHN", "b":"DOE", "id":"55" },
            { "_id":"2", "a":"bruce", "b":"lee", "id":"241" },
            { "_id":"2", "a":"BRUCE", "b":"LEE", "id":"321" },
            { "_id":"3", "a":"bruce", "b":"wayne", "id":"45" }
        ]
    }
};

$scope.infos = {
    "1": {"aa":"Message from infos 1"},
    "2": {"aa":"Message from infos 2"},
    "3": {"aa":"Message from infos 3"}
};

Angularjs过滤器还是json格式？

1 个答案: