AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

AngularJS ng-table插件设置排序

51自学网 http://www.wanshiok.com
AngularJS,ng-table插件,AngularJS,ng-table,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插件 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!


AngularJS,ng-table插件,AngularJS,ng-table,ng_table  
上一篇:vue.js+boostrap项目实践(案例详解)  下一篇:BooStrap对导航条的改造实践小结