当前位置: 首页 > 工具软件 > ngTable > 使用案例 >

ngtable的使用(1)——基础

隆扬
2023-12-01

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=”’姓名’” 是双括号中包单括号

 类似资料: