AngularJS ng-table插件設(shè)置排序
基礎(chǔ)概念
ng-table提供了一個表頭來提供,基礎(chǔ)的過濾信息:
(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兩個數(shù)據(jù)源 function demoController(NgTableParams, simpleList, countries) { this.countries = countries;//初始化selcet的數(shù)據(jù)源 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條目,過濾條件、表頭名字和數(shù)據(jù)源,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" } //初始化數(shù)據(jù)源 }, { dataset: simpleList }); } })(); (function() { "use strict"; angular.module("myApp").run(setRunPhaseDefaults); setRunPhaseDefaults.$inject = ["ngTableDefaults"]; //通過config來設(shè)置表格數(shù)量 function setRunPhaseDefaults(ngTableDefaults) { ngTableDefaults.params.count = 5; ngTableDefaults.settings.counts = []; } })();
以上就是對AngularJS ng-table插件 的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章
詳細(xì)介紹RxJS在Angular中的應(yīng)用
本篇文章主要介紹了詳細(xì)介紹RxJS在Angular中的應(yīng)用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09AngularJS入門教程之學(xué)習(xí)環(huán)境搭建
這篇文章主要介紹了AngularJS入門教程之學(xué)習(xí)環(huán)境搭建,本教程將指導(dǎo)您完成一個簡單的應(yīng)用程序創(chuàng)建過程,包括編寫和運行單元測試、不斷地測試應(yīng)用,需要的朋友可以參考下2014-12-12AngularJS入門教程之?dāng)?shù)據(jù)綁定用法示例
這篇文章主要介紹了AngularJS之?dāng)?shù)據(jù)綁定用法,結(jié)合實例形式分析了AngularJS基于內(nèi)置指令ng-model實現(xiàn)數(shù)據(jù)綁定的操作技巧,需要的朋友可以參考下2016-11-11詳談Angular 2+ 的表單(一)之模板驅(qū)動型表單
這篇文章主要介紹了Angular 2+ 的表單(一)之模板驅(qū)動型表單,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-04-04