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 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
js编写的treeview使用方法
Nov 11 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
7个你应该知道的JS原生错误类型
Apr 29 Javascript
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 YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
js 动态文字滚动的例子
2011/01/17 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
代码详解django中数据库设置
2019/01/28 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
如何验证python安装成功
2020/07/06 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
C语言中break与continue的区别
2012/07/12 面试题
销售业务员岗位职责
2014/01/29 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
公司委托书格式范文
2014/10/09 职场文书
财产分割协议书
2016/03/22 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
利用js实现简单开关灯代码
2021/11/23 Javascript
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL