微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AngularJS ui.bootstrap.alert 消息

<!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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐