adapt-strap 是 AngularJS UI 组件和实用工具,是基于 AngularJS 1.2+ 和 bootstrap 3 的。
Table Lite - 简单的列表 UI
Table AJAX - 高级的列表 UI
Tree Browser - 简单的树形 UI
Loading Indicators - 简单的指令
Global configuration - 所有组件都是全局配置使用
Customizable - 所有组件都是支持高度自定义的
使用 bower install adapt-strap --save安装
bower install adapt-strap --save
把库文件放入 index.html 文件:
添加 adaptv.adaptStrap 模块作为依赖
angular.module(‘myApp’, [ ‘ngSanitize’, // adapt-strap requires ngSanitize ‘adaptv.adaptStrap’ ]);
示例代码:
<div ng-controller="tableajaxCtrl"> <!-- ========== Simple Table Implementation ========== --> <div class="panel panel-default"> <div class="panel-body"> <ad-table-ajax table-name="artistsTable" column-definition="artistsColumnDef" table-classes="table table-bordered" page-sizes="[5, 20, 50]" pagination-btn-group-classes="btn-group btn-group-xs" ajax-config="artistsAjaxConfig"> </ad-table-ajax> </div> </div> <!--========== Advanced Implementation with search ========== --> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" ng-change="searchArtist()" ng-model="artistSearchKey"> <span class="input-group-addon"> <i class="glyphicon glyphicon-search"></i> </span> </div> </div> </div> </div> <div class="panel-body"> <ad-table-ajax table-name="artistsTableSearch" column-definition="artistsColumnDefSearch" table-classes="table table-bordered" page-sizes="[5, 20, 50]" pagination-btn-group-classes="btn-group btn-group-sm" ajax-config="artistsAjaxConfigSearch" page-loader="methods.pageLoader"> </ad-table-ajax> </div> </div></div>