Question

我有一个用户信息视图，其中有一个包含一些用户数据的表，我从后端异步获取。我不想打印这个对象的每个字段。

更好的做法是，直接在模板中选择数据或在控制器中生成对象，然后在模板中使用ngRepeat？

如果我想做更复杂的事情，比如将用户组打印为HTML列表，那么这将是更好的选择吗？

示例1：在模板中选择数据

// controller.js
backendApi.userInfo($stateParams.user)
.then(function (user){
    vm.user = user;
});

<!-- view.html -->
<table class="table table-condensed">
    <tr>
        <th class="col-xs-2 col-md-1">ID</th>
        <td class="col-xs-10 col-md-11">{{vm.user.id}}</td>
    </tr>
    <tr>
        <th class="col-xs-2 col-md-1">Name</th>
        <td class="col-xs-10 col-md-11">{{vm.user.name}} {{vm.user.surname}}</td>
    </tr>
    <tr>
        <th class="col-xs-2 col-md-1">Status</th>
        <td class="col-xs-10 col-md-11">{{vm.userEnabledString(vm.user)}}</td>
    </tr>
    <tr>
        <th class="col-xs-2 col-md-1">Groups</th>
        <td class="col-xs-10 col-md-11">{{vm.user.groups.join(", ")}}</td>
    </tr>
</table>

示例2：在控制器中选择数据并在视图中使用ngRepeat。

// controller.js
backendApi.userInfo($stateParams.user)
.then(function (user){
    // user has more fields that I don't need to print.
    vm.user = {
        "ID": user.id,
        "Name": user.name + " " + user.surname,
        "Status" : userEnabledString(user),
        "Groups": user.groups.join(", ")
    }
});

<!-- view.html -->
<table class="table table-condensed">
    <tr ng-repeat="(key, value) in vm.user">
        <th class="col-xs-2 col-md-1">{{key}}</th>
        <td class="col-xs-10 col-md-11">{{value}}</td>
    </tr>
</table>

函数userEnabledString打印布尔值的文本表示。

Answer 1

为什么不使用现有的Angular控件重新设计，除非它不能满足您的需求。

请参考下面的控件，它易于使用。

http://angular-ui.github.io/ui-grid/

AngularJS：我应该选择在视图或控制器中打印什么？

1 个答案: