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组件功能

    使用Angular CDK实现一个Service弹出Toast组件功能

    本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧
    2021-07-07
  • Angular4 中内置指令的基本用法

    Angular4 中内置指令的基本用法

    不得不说指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能。下面这篇文章主要给大家介绍了关于Angular4中内置指令的基本用法,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 对angularJs中$sce服务安全显示html文本的实例

    对angularJs中$sce服务安全显示html文本的实例

    今天小编就为大家分享一篇对angularJs中$sce服务安全显示html文本的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解Angular开发中的登陆与身份验证

    详解Angular开发中的登陆与身份验证

    Angular是Google开发的一款浏览器端的高人气JavaScript框架,Angular 经常会被用到后台和管理工具的开发,这两类都会需要对用户进行鉴权。而鉴权的第一步,就是进行身份验证。本文详细介绍了Angular开发中的登陆与身份验证。
    2016-07-07
  • AngularJS优雅的自定义指令

    AngularJS优雅的自定义指令

    这篇文章主要介绍了AngularJS优雅的自定义指令,告诉大家为什么使用AngularJS自定义指令,以及如何使用AngularJS自定义指令?感兴趣的小伙伴们可以参考一下
    2016-07-07
  • AngularJS入门知识之MVW类框架的编程思想探讨

    AngularJS入门知识之MVW类框架的编程思想探讨

    这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下
    2014-12-12
  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    这篇文章主要介绍了AngularJS使用ng-repeat指令实现下拉框的相关资料,非常不错,感兴趣的朋友一起看下吧,需要的朋友可以参考下
    2016-08-08
  • Angular2 PrimeNG分页模块学习

    Angular2 PrimeNG分页模块学习

    这篇文章主要为大家详细介绍了Angular2 PrimeNG分页模块学习教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Angular2的管道Pipe的使用方法

    Angular2的管道Pipe的使用方法

    本篇文章主要介绍了Angular 2的管道Pipe的使用方法,详细的介绍了管道的定义和使用方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-11-11
  • 在Angular中如何监听某个值的变化

    在Angular中如何监听某个值的变化

    这篇文章主要介绍了在Angular中如何监听某个值的变化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论