AngularJS UI 组件 adapt-strap

码农软件 · 软件分类 · AngularJS 扩展 · 2019-03-17 12:28:45

软件介绍

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>


本文地址:https://codercto.com/soft/d/1541.html

Alone Together

Alone Together

Sherry Turkle / Basic Books / 2011-1-11 / USD 28.95

Consider Facebookit’s human contact, only easier to engage with and easier to avoid. Developing technology promises closeness. Sometimes it delivers, but much of our modern life leaves us less connect......一起来看看 《Alone Together》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具