ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新
UI Bootstrap,用angular打造的bootstrap组件.
开始
依赖:
- angularJS
- angular-animate
- Bootstrap Css
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
配置:
angular.module('myModule', ['ui.bootstrap']);
手风琴--Accordion (ui.bootstrap.accordion)
手风琴提供一个项目列表,通过点击条目的标题来使主体内容折叠或展开.
一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
<span style="white-space:pre"> </span>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AccordionDemoCtrl" >
<span style="white-space:pre"> </span> <uib-accordion >
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<span style="white-space:pre"> </span> <uib-accordion-group heading="elset">
<p>Please, to delete your account, click the button below</p>
</uib-accordion-group>
</uib-accordion>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
});
</script>
</body>
</html>
uib-accordion 设置
1:"close-others":true/false.一个折叠打开的时候,其他折叠关闭,默认为"true".
<uib-accordion close-others="false">
<uib-accordion template-url="setting/setting.html" >
uib-accordion-group设置
<uib-accordion-group heading="Dynamic Body Content">
2:"is-disabled": true/false 默认"false",是否禁用折叠
<uib-accordion-group heading="elset" is-disabled="true" >
3:"is-open":true/false 默认"false",折叠是否展开
<uib-accordion-group heading="elset" is-open="true" >
4:"panel-class":给折叠设置样式类
<uib-accordion-group heading="elset" panel-class="active">
5: "template-url":指定模板地址
<uib-accordion-group heading="elset" template-url="tl.html">
警告--Alert (ui.bootstrap.alert)
一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AlertDemoCtrl" >
<script type="text/ng-template" id="alert.html">
<div class="alert" style="background-color:#fa39c3;color:white" role="alert">
<div ng-transclude></div>
</div>
</script>
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
<uib-alert template-url="alert.html">A happy alert!</uib-alert>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.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);
};
});
</script>
</body>
</html>
uib-alert设置
1:"close":显示关闭按钮.
uib-alert close="closeAlert($index)">
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
2:"dismiss-on-timeout":设置超时时间后警告自动关闭,单位毫秒.这个属性需要关闭属性的存在.
<uib-alert close="closeAlert($index)" dismiss-on-timeout='1000'>
3:"template-url":指定模板地址
<uib-alert template-url="alert.html">A happy顶顶顶顶 alert!</uib-alert>
4:"type":success/danger/info/warning.设置警告类型
<uib-alert type="danger" >
按钮--Buttons (ui.bootstrap.buttons)
通过给按钮添加属性"uib-btn-checkbox"或者"uib-btn-radio" 我们可以让按钮变成一组复选框或者一组单选按钮.
一个综合例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>Model: {{checkModel}}</pre>
<pre>Results: {{checkResults}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
</div>
<h4>Radio & Uncheckable Radio</h4>
<pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
</div>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
</div>
<div>
<button class="btn btn-default" ng-click="uncheckable = !uncheckable">
Toggle uncheckable
</button>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
$scope.checkResults = [];
$scope.$watchCollection('checkModel', function () {
$scope.checkResults = [];
angular.forEach($scope.checkModel, function (value, key) {
if (value) {
$scope.checkResults.push(key);
}
});
});
});
</script>
</body>
</html>
多选按钮例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="ButtonsCtrl">
<pre>Results: {{checkResults}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {
$scope.checkModel = {
left: false,
middle: true,
right: false
};
$scope.$watchCollection('checkModel', function () {
$scope.checkResults = [];
angular.forEach($scope.checkModel, function (value, key) {
if (value) {
$scope.checkResults.push(key);
}
});
});
});
</script>
</body>
</html>
ui-btn-checkbox 设置
1:"ng-model":设置按钮默认选中状态.
<label class="btn btn-primary" ng-model="true" uib-btn-checkbox >Left</label>
2:"btn-checkbox-true"/"btn-checkbox-false":根据按钮是否选中来设定值
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle</button>
单选按钮例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
<pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
</script>
</body>
</html>
uib-btn-radio 设置
1"ng-model":所有单选按钮都应该给相同的名称
<label class="btn btn-primary" ng-model="radioModel" >Left</label> <label class="btn btn-primary" ng-model="radioModel">Middle</label> <label class="btn btn-primary" ng-model="radioModel">Right</label>
2:"uib-btn-radio":给按钮设定值
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
折叠--Collapse (ui.bootstrap.collapse)
折叠提供了一个简单的方法来显示和隐藏一个元素.
简单例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
<span style="white-space:pre"> </span>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="CollapseDemoCtrl">
<span style="white-space:pre"> </span><button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<span style="white-space:pre"> </span><hr>
<span style="white-space:pre"> </span><div uib-collapse="isCollapsed">
<span style="white-space:pre"> </span><div class="well well-lg">Some content</div>
<span style="white-space:pre"> </span></div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
<span style="white-space:pre"> </span>app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
</script>
</body>
</html>
1:"uib-collapse":true/false 默认为false设置折叠是否展开
<div uib-collapse="false">
Tabs (ui.bootstrap.tabs)
Modal (ui.bootstrap.modal)
一:在angular中应用modal
$uibModal
使用方法:
直接注入到控制器中
.controller('name', function($scope,$uibModal) {
二:其他一些参数
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'setting/modal/notifications.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
参数设置在"$uibModal.open"函数中.
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控制器中传递值.
如:
这个是打开modal的控制器
$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.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
};
var modalInstance = $uibModal.open({
templateUrl: 'setting/modal/'+tem+'.html',
controller: con,
resolve: {
items: function () { //=============================================这就是利用resolve传值
return $scope.items;
}
}
});
};
下面这个modal的控制器
.controller('ModalWithSelectCtrl', function ($scope, $uibModalInstance,items) {//===============items在这里传进来
$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();
};
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
})
三:" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用的对象.
用法:
在modal内容页面中的控制器中
.controller('ModalNotiCtrl', function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close();//关闭
};
$scope.cancel = function () {
$uibModalInstance.dismiss();//取消
};
})
1:"$uibModalInstance.dismiss();":取消modal
2:" $uibModalInstance.close();":关闭modal