AngularJS UI 组件 adapt-strap
- 授权协议: 未知
- 开发语言: JavaScript HTML/CSS
- 操作系统: 跨平台
- 软件首页: https://github.com/Adaptv/adapt-strap
- 软件文档: http://adaptv.github.io/adapt-strap/
软件介绍
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安装把库文件放入 index.html 文件：
<script src="bower_components/adapt-strap/dist/adapt-strap.min.js"></script> <script src="bower_components/adapt-strap/dist/adapt-strap.tpl.min.js"></script> <link rel="stylesheet" href="bower_components/adapt-strap/dist/adapt-strap.min.css"/>
添加 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>
