Question

我无法使用嵌套的ng-repeat制作合适的表格。

我想要的是https://jsbin.com/razamagabo/1/edit?output

但是我被困在https://plnkr.co/edit/d5voXIpzYL81sSl9BSY2?p=preview

我不介意我的标记不是表格，但我仍然坚持使用div

<div class="row">
            <div class="col-xs-6" ng-repeat="obj in data">
                {{obj.date}}
                <div ng-repeat="user in obj.users">                 
                    <br>
                    {{user.name}}
                    <br>
                    {{user.mark}}
                </div>
            </div>
        </div>

Answer 1

为了能够以所需的方式显示数据，如果在尝试渲染之前在JS中重构数据，则可能是最简单的。

当用户名位于数据数组中的单独对象中时，尝试匹配用户名将非常复杂。

我建议您在控制器中处理scope.data。（我假设您对接收数据的方式没有多少控制权。）

例如，在您获得数据后......

$scope.data = [
    {
        date:'1-1-2016',
        users:[
            {
                'name':'james',
                'mark':18
            },
            {
                'name':'alice',
                'mark':20
            }
        ]
    },
    {
        date:'2-1-2016',
        users:[
            {
                'name':'james',
                'mark':60
            },
            {
                'name':'alice',
                'mark':55
            }
        ]
    }
]

var userData = {};
var possibleDates = [];
for (dataObj of Object.entries($scope.data)) {
    for (userObj of dataObj) {
        if ( !userData[userObj.name] ) {
            userData[userObj.name] = {};
        }
        userData[userObj.name][dataObj.date] = userObj.mark;
        if (dates.indexOf(dataObj.date) < 0) {
            dates.push(dataObj.date);
        }
    }
}

$scope.users = userData;
$scope.dates = possibleDates;

这将在你的范围

上为你提供这样的对象

$scope.users = {
    'james': {
        '1-1-2016': 18,
        '2-1-2016': 60
    },
    'alice': {
        '1-1-2016': 20,
        '2-1-2016': 55
    }
};

$scope.dates = ['1-1-2016', '2-1-2016'];

对我来说，这似乎更容易为您的模板构建。虽然这假设每个用户都有每个日期的条目。

<div>
    <div id='header-row'>
        <div id='empty-corner></div>
        <div class='date-header' ng-repeat='date in $scope.dates></div>
    </div>
    <div class='table-row' ng-repeat='{key, value} in $scope.users'>
        <div class='user-name'>{{ key }}</div>
        <div class='user-data' ng-repeat='date in $scope.dates>
            {{ value[date] }}
        </div>   
    </div>
</div>

只要您将inline-block个样式应用于行/元素，就可以为您提供所需内容。

虽然您也可以考虑进一步简化数据的方法。您可以将每个用户都拥有一个日期为键的对象，而不是将值推送到数组中。

Answer 2

使用您当前的数据结构，无法按您的需要显示它。您正试图在data数组中循环日期用户对象，但是您希望在单独的行中显示来自users数组内的用户。使用ng-repeat，您可以遍历行tr，但不能遍历列。首先，您需要将数据数组映射到应该在1行中可见的元素到数组中的1个对象。目前，您有两个独立的对象：詹姆斯马克：18岁，詹姆斯马克：60岁。

使用angularjs嵌套的ng-repeat来构造复杂的表

2 个答案: