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

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 中重组数据。

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

我建议在 Controller 中处理您的 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 样式应用于行/元素，这应该会为您提供所需的内容。

尽管您还可以考虑进一步简化数据的方法。您可以不让每个用户都有一个以日期为键的对象，您可以将值放入数组中。