angularJs-UI-bootstrap系列教程2(According)
废话不说上代码
angular.module('MyApp', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])
.controller('accordionCtrl', ['$scope', function($scope) {
$scope.oneAtATime = true; $scope.groups = [{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
}, {
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}]; $scope.items = ['Item 1', 'Item 2', 'Item 3']; $scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
}; $scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
}])
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime"> Open only one at a time
</label>
</div>
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>
讲解一下,首先是模块的依赖要导入进来,这点要注意三个依赖都需要
然后就是Accordion 分为两个部分
1.uib-accordion
close-others:支持表达式和常量(默认:true), 只允许打开一个?
template-url:(默认template/accordion/accordion.html
)模板地址
2.uib-accordion-group
heading : 默认(空)
is-open:支持表达式,并且可$watch(默认:false)
is-disabled:支持表达式,并且可$watch(默认:false)
panel-class : 可$watch(默认:panel-default
)
template-url : (默认:uib/template/accordion/accordion-group.html
)
angularJs-UI-bootstrap系列教程2(According)的更多相关文章
- 别人写的一个Bootstrap系列教程
http://www.cnblogs.com/lansy/category/659061.html
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...
- Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
- PyQt5系列教程(二)利用QtDesigner设计UI界面
软硬件环境 OS X EI Capitan Python 3.5.1 PyQt 5.5.1 PyCharm 5.0.1 前言 在PyQt5系列教程的第一篇http://blog.csdn.net/dj ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- Unreal Engine 4 系列教程 Part 4:UI教程
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- <转载>Bootstrap 入门教程 http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 系列
Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式.我们从全局样式(Global Style),格网系统(Grid System),流式格网( ...
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- 老周的ABP框架系列教程 -》 一、框架理论初步学习
老周的ABP框架系列教程 -- 一.框架理论初步学习 1. ABP框架的来源与作用简介 1.1 简介 1.1.1 ABP框架全称为"ASP.NET Boilerplate ...
- MVC5 + EF6 + Bootstrap3系列教程
本系列教程以ASP.NET MVC5为核心框架,使用Entity Framewok6访问数据,并使用Bootstrap3作为前端UI框架.帮助大家开发出一套高效.美观.稳定.实用的软件系统. MVC5 ...
随机推荐
- 校验 MD5 值
Linux 环境下:打开终端,输入命令:"md5sum filename",将结果与网页提供值对比.Windows 环境下:下载 MD5 校验软件并使用.
- 用TLS实现安全TCP传输及配置和访问https的web服务(转)
tls相关 大致原理 为了让两个之间实现安全传输,(我们把服务端统一叫做TcpServer,客户端统一叫做TcpClient),TcpServer在listen完了accept之后要用一个证书来声明自 ...
- 【C#】HTTP请求GET,POST(远程证书失效)
HTTP定义了与服务器交互的不同方法,基本方法有GET,POST,PUT,DELETE,分别对于查,该,增,删.一般情况下我们只用到GET和POST,其他两种都也可以用GET和POST来实现,很多浏览 ...
- 从今日起,我会把OpenGL红宝书上的例子用完整的代码形式写在我的博客中,
1.使用教程:OpenGL红宝书第8版 2.使用的库工具:GLEW和GLFW 3.使用的IDE:vs2012 4.说说目的:完整的看一遍OpenGL,加深印象并且熟练掌握运用OpenGL 5.欢迎有相 ...
- 获取Excel数据(或部分数据)并导出成txt文本格式
运行代码前先导入jxl架包,以下代码仅供参考: 测试excel文件(我要获取该excel的内容为省.县.乡.村.组和PH的值): ExcelTest01类代码如下: // 读取Excel的类 impo ...
- Cormen — The Best Friend Of a Man
Cormen — The Best Friend Of a Man time limit per test 1 second memory limit per test 256 megabytes i ...
- DEAMONTOOLS: installation
installing daemontools .. adding -I /usr/include/errno.h to last first line of conf-cc mkdir -p /pac ...
- TCPIP header
tcp packet: tcp header: ip header:
- DZY Loves Partition
问题描述 DZY喜欢拆分数字.他想知道能否把nn拆成恰好kk个不重复的正整数之和. 思考了一会儿之后他发现这个题太简单,于是他想要最大化这kk个正整数的乘积.你能帮帮他吗? 由于答案可能很大,请模10 ...
- [Eclispe] NDK内建include路径修改
[Eclispe] NDK内建include路径修改 编辑 jni/android.mk 中 LOCAL_C_INCLUDES 变量后,该变量值将被列入项目属性的内建include头文件包含路径,无法 ...