AngularJS ng-table插件设置排序
更新时间:2016年09月21日 10:28:55 作者:MakingChoice
这篇文章主要介绍了AngularJS ng-table插件设置排序的相关资料,需要的朋友可以参考下
基础概念
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插件 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!
相关文章
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧2021-07-07
对angularJs中$sce服务安全显示html文本的实例
今天小编就为大家分享一篇对angularJs中$sce服务安全显示html文本的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09


最新评论