我要评论基础概念
ng-table提供了一个表头来提供，基础的过滤信息：
（1）指定一列的过滤器，然后模板就会使用。
（2）ngtable支持number, text, select 和 select-multiple的值模板。
（3）可以有选择的为ngtableparams提供初始过滤值。
<div class="row">
<div class="col-md-6" ng-controller="democontroller as demo">
<h3>ngtable directive</h3>
<table ng-table="demo.tableparams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'name'" filter="{name: 'text'}">{{row.name}}</td>
<td data-title="'age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'money'">{{row.money}}</td>
<td data-title="'country'" filter="{ country: 'select'}" filter-data="demo.countries">{{row.country}}</td>
</tr>
</table>
</div>
<div class="col-md-6" ng-controller="dynamicdemocontroller as demo">
<h3>ngtabledynamic directive</h3>
<table ng-table-dynamic="demo.tableparams with demo.cols" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns">{{row[col.field]}}</td>
</tr>
</table>
</div>
</div>
(function() {
"use strict";
var app = angular.module("myapp", ["ngtable", "ngtabledemos"]);
app.controller("democontroller", democontroller);
democontroller.$inject = ["ngtableparams", "ngtablesimplemediumlist", "ngtabledemocountries"];
//注入ngtableparams（ngtablemodule）和ngtablesimplemediumlist、ngtabledemocountries两个数据源
function democontroller(ngtableparams, simplelist, countries) {
this.countries = countries;//初始化selcet的数据源
this.tableparams = new ngtableparams({
// initial filter
filter: { name: "t" } //初始过滤条件
}, {
dataset: simplelist
});
}
app.controller("dynamicdemocontroller", dynamicdemocontroller);
dynamicdemocontroller.$inject = ["ngtableparams", "ngtablesimplemediumlist", "ngtabledemocountries"];
function dynamicdemocontroller(ngtableparams, simplelist, countries) {
this.cols = [//自定义table条目，过滤条件、表头名字和数据源,filterdata: countries。
{ field: "name", title: "name", filter: { name: "text" }, show: true },
{ field: "age", title: "age", filter: { age: "number" }, show: true },
{ field: "money", title: "money", show: true },
{ field: "country", title: "country", filter: { country: "select" }, filterdata: countries, show: true }
];
this.tableparams = new ngtableparams({
// initial filter
filter: { country: "ecuador" } //初始化数据源
}, {
dataset: simplelist
});
}
})();
(function() {
"use strict";
angular.module("myapp").run(setrunphasedefaults);
setrunphasedefaults.$inject = ["ngtabledefaults"];
//通过config来设置表格数量
function setrunphasedefaults(ngtabledefaults) {
ngtabledefaults.params.count = 5;
ngtabledefaults.settings.counts = [];
}
})();
以上就是对angularjs ng-table插件 的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论