AngularJS  ng-table插件设置排序


Posted in Javascript onSeptember 21, 2016

基础概念

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插件设置排序

以上就是对AngularJS ng-table插件 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
超级退弹代码
Jul 07 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
BooStrap对导航条的改造实践小结
Sep 21 #Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 #Javascript
You might like
php下使用无限生命期Session的方法
2007/03/16 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python正则捕获操作示例
2017/08/19 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python退出循环的方法
2020/06/18 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
详解KMP算法以及python如何实现
2020/09/18 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
2014年民警工作总结
2014/11/25 职场文书
专家推荐信怎么写
2015/03/25 职场文书
欠条范文
2015/07/03 职场文书
2016教师节感恩话语
2015/12/09 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Mysql Show Profile
2021/04/05 MySQL
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
python中 Flask Web 表单的使用方法
2022/05/20 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS