ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新
UI Bootstrap,用angular打造的bootstrap组件.
开始
依赖:
- angularJS
- angular-animate
- Bootstrap Css
配置:
angular.module('myModule', ['ui.bootstrap']);
手风琴--Accordion (ui.bootstrap.accordion)
手风琴提供一个项目列表,通过点击条目的标题来使主体内容折叠或展开.
官网上的例子：
html:
This content is straight in the template.
{{group.content}}
The body of the uib-accordion group grows to fit the contents
{{item}}
Hello
Please, to delete your account, click the button below
I can have markup, too!
This is just some content to illustrate fancy headings.
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', 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
};
});
一个例子
{{group.content}}
Please, to delete your account, click the button below
uib-accordion 设置
1:"close-others":true/false.一个折叠打开的时候,其他折叠关闭,默认为"true".
uib-accordion-group设置
2:"is-disabled": true/false 默认"false",是否禁用折叠
3:"is-open":true/false 默认"false",折叠是否展开
4:"panel-class":给折叠设置样式类
5: "template-url":指定模板地址
警告--Alert (ui.bootstrap.alert)
官网上的例子
html
{{alert.msg}}
A happy alert!
js
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
一个例子
{{alert.msg}}
A happy alert!
uib-alert设置
1:"close":显示关闭按钮.
uib-alert close="closeAlert($index)"> $scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};2:"dismiss-on-timeout":设置超时时间后警告自动关闭,单位毫秒.这个属性需要关闭属性的存在.
3:"template-url":指定模板地址
A happy顶顶顶顶 alert! 4:"type":success/danger/info/warning.设置警告类型
按钮--Buttons (ui.bootstrap.buttons)
通过给按钮添加属性"uib-btn-checkbox"或者"uib-btn-radio" 我们可以让按钮变成一组复选框或者一组单选按钮.
一个综合例子
Single toggle
{{singleModel}}
Checkbox
Model: {{checkModel}}
Results: {{checkResults}}
Radio & Uncheckable Radio
{{radioModel || 'null'}}
多选按钮例子
Results: {{checkResults}}
ui-btn-checkbox 设置
1:"ng-model":设置按钮默认选中状态.
2:"btn-checkbox-true"/"btn-checkbox-false":根据按钮是否选中来设定值
单选按钮例子
{{radioModel || 'null'}}
uib-btn-radio 设置
1"ng-model":所有单选按钮都应该给相同的名称
2:"uib-btn-radio":给按钮设定值
折叠--Collapse (ui.bootstrap.collapse)
折叠提供了一个简单的方法来显示和隐藏一个元素.
简单例子
Some content
1:"uib-collapse":true/false 默认为false设置折叠是否展开
Pagination (ui.bootstrap.pagination)
Tabs (ui.bootstrap.tabs)
Modal (ui.bootstrap.modal)
一:在angular中应用modal
$uibModal
使用方法:
直接注入到控制器中
.controller('name', function($scope,$uibModal) {
调用者
$scope.withSelected = function(tem, con) {// 打开modal
var selectNum = 0, selectAction = "";
$scope.isok = false;
$scope.iscancal = false;
$scope.is_no_user = false;
$scope.is_has_user = false;
$scope.selectNum = 0;
$('.user_check:checked').each(function() {
selectNum = selectNum + 1;
});
if (selectNum == 0) {
$scope.isok = true;
$scope.is_no_user = true;
} else {
$scope.selectNum = selectNum;
$scope.isok = true;
$scope.iscancal = true;
$scope.is_has_user = true;
$scope.selectAction = selectAction;
}
$scope.enable=function(){
alert(222)//方法
}
$scope.items = {//属性
isok : $scope.isok,
is_no_user : $scope.is_no_user,
iscancal : $scope.iscancal,
is_has_user : $scope.is_has_user,
selectNum : $scope.selectNum,
selectAction : $scope.fselectedtValue,
fun:$scope.enable
};
var _this = this;
var modalInstance = $uibModal.open({
templateUrl : 'setting/modal/' + tem + '.html',
controller : con,
resolve : {//传递信息给model控制器
items : function() {
return $scope.items;
},parent: function(){
return _this
}
}
});
};
被调用者
.controller('ModalWithSelectCtrl', function($scope, $uibModalInstance, items,parent) {
$scope.isok = items.isok;
$scope.is_no_user = items.is_no_user;
$scope.iscancal = items.iscancal;
$scope.is_has_user = items.is_has_user;
$scope.selectNum = items.selectNum;
$scope.selectAction = items.selectAction;
$scope.ok = function() {
$uibModalInstance.close();
parent.enable()//可以调用调用者的方法
};
$scope.cancel = function() {
$uibModalInstance.dismiss();
};
})
二：" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用参数
1:animation:设置为false,关闭动画效果.默认"true".
2:appendTo:给modal设置一个容器.默认:"body".
3:backdrop:设置false关闭控件背景,默认为"true".
可能的值:
"true":有背景可以通过点击背景来关闭控件.
"false":没有背景.
"static":有背景,但点击背景不能关闭控件.
4:"backdropClass":给背景添加一个样式类.
5:"controller":为modal内容添加控制器.
6:"keyboard":设置modal是否可以通过按键"ESC"关闭,默认:"true".
7:"openedClass":modal打开时,为html body 添加样式类.
8:"size":设置modal的大小.可能的值:
"lg"
"sm"
9:"template":设置modal内容.
10:"templateUrl":通过引入html来设置modal的内容.
11:"windowClass":为modal添加样式类.
12:"windowTopClass":为当前modal添加样式类.
13:"resolve":调用控制器与modal控制器中传递值.
三:下面是uibModalInstance一些可用的对象.
1:"$uibModalInstance.dismiss();":取消modal
2:" $uibModalInstance.close();":关闭modal