AngularJS 表格界面答案

【问题标题】：AngularJS table interfaceAngularJS 表格界面
【发布时间】：2015-01-06 23:48:21
【问题描述】：

我正在尝试基于三个 RESTful 数据端点找到使用 AngularJS 显示表格数据的最佳方式。例如，数据由三个模型组成：

室友

id
name

家务

id
name

家务分配

id
day
roommate (fk)
chore (fk)

我想在一张表格中显示家务分配，x 轴为天，y 轴为室友。

          Mon       Tue       Wed       Thu        Fri       Sat       Sun
Bob       dishes                        mow grass                      dishes
Alice               trash     dishes                         sweep
Mike                                               dishes    vacuum

我可以使用 ng-repeat 轻松地将数据显示在单独的列表中，但我不确定是否将它们组合到表格中。如果我可以简单地从我已经拥有的三个单独的数据列表中构建它，我正在尝试避免对此表进行自定义 API 调用。非常感谢任何建议。

【问题讨论】：

标签： angularjs html-table ng-repeat ng-bind

【解决方案1】：

这可能超出您的预期，但您之前尝试过angular-datatables 吗？如果将源文件设置为室友，则可以构建七列，每列代表一周中的一天。由于您将源文件设置为室友，因此它将在表中为每个室友生成一行。当它生成行时，您可以将一些代码放在一起来查找与当前室友和星期几匹配的任何家务。我意识到这可能有点难以理解，所以这里有一些代码示例（在您按照入门页面上所示的设置进行操作之后）：

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withSource('enter your roommate api call here')
    });

$scope.dtColumns = [
    DTColumnBuilder.newColumn('Mon').withTitle('Mon').renderWith(function (data, type, full) {
        currentRoommate = full.name
        //write your code here that queries your join table for the roommate name and Monday
        //return result;
    }),
    DTColumnBuilder.newColumn('Tue').withTitle('Tue').renderWith(function (data, type, full) {
        currentRoommate = full.name
        //write your code here that queries your join table for the roommate name and Tuesday
        //return result;
    }),
    ...so on until the rest of the week

在你看来，只要放下这个：

<table id="foobar" datatable="" dt-options="dtOptions" dt-columns="dtColumns"></table>

这有点冗长，因此您可能会将连接表查询拆分为服务。 Angular-datatables 带有很多选项，您可以在文档的 API 部分找到这些选项，因此您可以根据需要调整表格的功能（禁用排序等）。不要忘记注入 DTOptionsBuilder 和 DTColumnBuilder 的依赖项。

希望这能让你走上正轨。

【讨论】：

【解决方案2】：

我会填充中间对象（在服务或控制器中），其中包含选定查看期的数据 - 可以说是过去两周的价值。然后可以使用熟悉的 ng-repeat 在模板中轻松遍历。

换句话说，让视图不关心 restful 端点或其他服务结构 - 只需为它提供一个模型来呈现。

【讨论】：

【解决方案3】：

我选择在控制器中构建一个$scope.choreTable 对象（使用Underscore.js）。 $q.all() 用于确保数据承诺在建表之前全部解决。

$q.all([roommateQuery, choreQuery, choreAssignmentQuery]).then(function(){
    $scope.choreTable = [];
    var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    _.each($scope.roommates, function(roommate, i){
        $scope.choreTable.push({roommate: roommate, days: []});
        _.each(days, function(day, j){
            $scope.choreTable[i].days.push(
                _.where($scope.choreAssignments, {roommate: roommate.id, day: day})
            );
        });
    });
});

产生这样的对象：

[
    {
        roommate: {id: 1, name: "Bob"}, 
        days: [[ChoreAssignment1], [], [], [ChoreAssignment2], [], [], [ChoreAssignment1]]
    },
    {
        roommate: {id: 2, name: "Alice"}, 
        days: [[], [ChoreAssignment3], [ChoreAssignment1], [], [], [ChoreAssignment4], []]
    },
    {
        roommate: {id: 3, name: "Mike"}, 
        days: [[], [], [], [], [ChoreAssignment1], [ChoreAssignment5], []]
    }
]

然后在视图中：

<tr ng-repeat="row in choreTable">
    <td>
        [[ row.roommate.name ]]
    </td>
    <td ng-repeat="day in row.days">
        <div ng-repeat="choreAssignment in day">
            [[ choreAssignment.chore.name ]]
        </div>
    </td>
</tr>

【讨论】：