AngularJS ui.bootstrap.alert 消息
来源:互联网 发布:mac蓝光播放软件 编辑:程序博客网 时间:2024/05/16 19:28
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AlertIndex</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
.controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'info', msg: '提示消息' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' },
{ type: 'warning', msg: '警告信息' },
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' }
];
$scope.addInfoAlert = function () {
$scope.alerts.push({
type: "info", msg: '消息 alert!', "dismiss-on-timeout": "3000", close: function () {
return closeAlert(this);
},
});
};
$scope.addSuccessAlert = function () {
$scope.alerts.push({ type: "success", msg: '成功 alert!' });
};
$scope.addWarningAlert = function () {
$scope.alerts.push({ type: "warning", msg: '警告 alert!' });
};
$scope.addDangerAlert = function () {
$scope.alerts.push({ type: "danger", msg: '危险 alert!' });
};
$scope.closeAlert = function (index) {
$scope.alerts.splice(index, 1);
};
});
</script>
</head>
<body ng-app="ui.bootstrap.demo">
<div ng-controller="AlertDemoCtrl">
<script type="text/ng-template" id="alert.html" >
<div ng-transclude></div>
</script>
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)" dismiss-on-timeout="3000">{{alert.msg}}</div>
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
<button type="button" class='btn btn-info' ng-click="addInfoAlert()">Add Info Alert</button>
<button type="button" class='btn btn-success' ng-click="addSuccessAlert()">Add Success Alert</button>
<button type="button" class='btn btn-warning' ng-click="addWarningAlert()">Add Warning Alert</button>
<button type="button" class='btn btn-danger' ng-click="addDangerAlert()">Add Danger Alert</button>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AlertIndex</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
.controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'info', msg: '提示消息' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' },
{ type: 'warning', msg: '警告信息' },
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' }
];
$scope.addInfoAlert = function () {
$scope.alerts.push({
type: "info", msg: '消息 alert!', "dismiss-on-timeout": "3000", close: function () {
return closeAlert(this);
},
});
};
$scope.addSuccessAlert = function () {
$scope.alerts.push({ type: "success", msg: '成功 alert!' });
};
$scope.addWarningAlert = function () {
$scope.alerts.push({ type: "warning", msg: '警告 alert!' });
};
$scope.addDangerAlert = function () {
$scope.alerts.push({ type: "danger", msg: '危险 alert!' });
};
$scope.closeAlert = function (index) {
$scope.alerts.splice(index, 1);
};
});
</script>
</head>
<body ng-app="ui.bootstrap.demo">
<div ng-controller="AlertDemoCtrl">
<script type="text/ng-template" id="alert.html" >
<div ng-transclude></div>
</script>
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)" dismiss-on-timeout="3000">{{alert.msg}}</div>
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
<button type="button" class='btn btn-info' ng-click="addInfoAlert()">Add Info Alert</button>
<button type="button" class='btn btn-success' ng-click="addSuccessAlert()">Add Success Alert</button>
<button type="button" class='btn btn-warning' ng-click="addWarningAlert()">Add Warning Alert</button>
<button type="button" class='btn btn-danger' ng-click="addDangerAlert()">Add Danger Alert</button>
</div>
</body>
</html>
阅读全文
0 0
- AngularJS ui.bootstrap.alert 消息
- AngularJS ui.bootstrap.alert 消息
- AngularJS ui.bootstrap.tabs
- AngularJS ui.bootstrap.pagination 分页
- AngularJS+ui.bootstrap实现图片轮播
- angularjs之ui-bootstrap的使用
- 使用angularjs ui-bootstrap遇到的问题
- angularjs之ui-bootstrap的使用
- angularjs ui.bootstrap.pagination分页简单使用
- angularjs之ui Bootstrap翻页效果
- alert angularjs
- js 重写 bootstrap 样式 alert/confirm 消息窗口 - cnhxz
- bootstrap源码学习之消息提示alert(一)
- js 重写 bootstrap 样式 alert/confirm 消息窗口
- angularjs之ui-bootstrap和ui-router结合使用
- AngularJs的UI组件ui-Bootstrap——Datepicker Popup
- AngularJs + angular-ui-router + bootstrap 实现基础导航栏
- angularjs+bootstrap+SpringMVC+Spring+mybatis+maven--ui.router路由一
- SSH框架入门(1)——struts2(1)
- Cookie笔记
- HDOJ1045
- [Mysql] 防御和检查SQL注入攻击的手段
- 机器学习之K-means聚类算法
- AngularJS ui.bootstrap.alert 消息
- Spring学习(三):初探Spring容器
- 我的递归总结
- SpringBoot学习之hello world
- HDU 6045 推公式
- 进 程 控 制
- 南阳理工学院acm 水池问题 自己的理解
- 面向对象
- JavaScript基础学习(一)