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

时间:2016-01-22 09:34:48

标签: angularjs model-view-controller mvvm angularjs-ng-repeat angularjs-controller

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

更好的做法是,直接在模板中选择数据或在控制器中生成对象,然后在模板中使用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打印布尔值的文本表示。

1 个答案:

答案 0 :(得分:0)

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

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

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