Question

数据库提供以下JSON字符串。

$scope.items = [
    {"Name":"Michael","Region":"Canada","Subject":"Chemistry","Action":"Email"},
    {"Name":"Michael","Region":"Canada","Subject":"Biology","Action":"Call"},
    {"Name":"Kristen","Region":"USA","Subject":"Chemistry","Action":"Skype"},
    {"Name":"Kristen","Region":"USA","Subject":"Physics","Action":"Email"},
    {"Name":"Kristen","Region":"USA","Subject":"Chemistry","Action":"Call"},
    {"Name":"Kristen","Region":"Europe","Subject":"Chemistry","Action":"Call"},
    {"Name":"Kristen","Region":"Europe","Subject":"Biology","Action":"Call"}
];

目前显示如下数据:(使用ng-repeat）

Name           Region         Subject         Action
Michael        Canada         Chemistry       Email
Michael        Canada         Biology         Call
Kristen        USA            Chemistry       Skype
Kristen        USA            Physics         Email
Kristen        USA            Chemistry       Call
Kristen        Europe         Chemistry       Call
Kristen        Europe         Biology         Call

预期结果（表格格式）

Name          Region        Subject                   Action           
Michael       Canada        Chemistry,Biology         Email,Call
Kristen       USA           Chemistry,Physics         Skype,Email,Call
Kristen       Europe        Chemistry,Biology         Call

不了解如何使用ng-repeat获得预期结果（如上所示）。

Answer 1

你不能简单地使用headerview就可以进行这种复杂的分组，但是在将数据发送到ng-repeat之前格式化你的数据我们可以实现上述结果。

在JS中添加以下ng-repeat以准备用于在HTML级别进行分组的数据

angular.forEach

在HTML中添加以下模板以显示分组数据。

$scope.newList = [];
        var newItemsList = [];
        var nameList = [];
        var regList = [];
        angular.forEach($scope.items, function(val, key) {
            var stud = val;
            var newObj = {};

            newObj.Name = stud.Name;
            newObj.Region = stud.Region;
            newObj.Subject = [];
            newObj.Action = [];
            if (nameList.indexOf(stud.Name) == -1 || regList.indexOf(stud.Region) == -1) {
                newObj.Subject.push(stud.Subject);
                newObj.Action.push(stud.Action);
                newItemsList.push(newObj);
                nameList.push(stud.Name);
                regList.push(stud.Region);
            } else {
                for (var i = 0; i < newItemsList.length; i++) {
                    var item = newItemsList[i];
                    if (item.Name == stud.Name) {
                        if (item.Subject.indexOf(stud.Subject) == -1)
                            item.Subject.push(stud.Subject);
                        if (item.Action.indexOf(stud.Action) == -1)
                            item.Action.push(stud.Action);
                        console.log(newItemsList);
                    }
                }
            }
            $scope.newList = newItemsList;
        });

这是您要显示的新的maped数据

<table>
   <tr >
    <td>Name</td>
    <td>Region</td>
    <td>Subject</td>
    <td>Action</td>
</tr>
<tr ng-repeat="item in newList track by $index">
    <td>{{item.Name}}</td>
    <td>{{item.Region}}</td>
    <td><p ng-repeat="sub in item.Subject track by sub">{{sub}}</p></td>
    <td><p ng-repeat="action in item.Action track by action">{{action}}</p></td>
</tr>
</table>

需要使用ng-repeat分组显示数据（两列组）

1 个答案: