ngtable的使用(1)——基础

ngtable 是angular的一个表格控件,集成了表格、分页、排序等等功能。官方学习网站http://ng-table.com/#/ 纯英文,但还是比较好用的。

需要的文件
ng-table.min.css、ng-table.min.js、angular.js

具体操作(不分前后):
1、注入

    angular.module("myApp", ["ngTable"]);

2、controller

    app.controller('DemoCtrl', function($scope, NgTableParams) {
        var self = this;
        var data = [{name: "Moroni", age: 50},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43}];
        self.tableParams = new NgTableParams({
             page: 1,            // show first page
            count: 10           // count per page
        }, {
            counts:[10,15],  
            getData: function(params) {
                return data
               //获取数据的方法,之后再说
                }
            });
        })

3、HTML

<div ng-controller="DemoCtrl as demo">
   <table ng-table="demo.tableParams" class="table">
    <tr ng-repeat="user in $data">
        <td title="'姓名'">{{user.name}}</td>
        <td title="'年龄'">{{user.age}}</td>
    </tr>
  </table>
</div>

这里title=”’姓名’” 是双括号中包单括号

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值