AngularJS ng-table插件设置排序
程序员文章站
2022-10-18 16:23:05
基础概念
ng-table提供了一个表头来提供,基础的过滤信息:
(1)指定一列的过滤器,然后模板就会使用。
(2)ngtable支持number, text...
基础概念
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插件 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!
上一篇: 乾隆为什么会跟嘉庆说不能杀和珅?