标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>alertDemo</title> 6 <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 7 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> 8 <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script> 9 <script type="text/javascript" src="app.js"></script> 10 <style type="text/css"> 11 12 .alert-fixed { 13 width: 300px; 14 margin-left: -150px; 15 padding-top: 30px; 16 padding-bottom: 30px; 17 opacity: .9; 18 box-shadow: 0 2px 5px #A5A5A5; 19 z-index: 1060; 20 position: fixed; 21 left: 50%; 22 text-align: center; 23 } 24 </style> 25 </head> 26 <body data-ng-app="app"> 27 <br/> 28 <br/> 29 <br/> 30 <br/> 31 <br/> 32 <div data-ng-controller="alertController" class="container"> 33 <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000" class="alert-fixed">{{alert.msg}}</uib-alert> 34 35 <button type="button" class=‘btn btn-primary‘ ng-click="addAlert()">{{ typeSwitch }}</button> 36 </div> 37 38 </body> 39 </html>
1 var app = angular.module(‘app‘, [‘ui.bootstrap‘]); 2 3 app.controller(‘alertController‘, function($scope){ 4 $scope.alerts = [ 5 ]; 6 $scope.typeSwitch = false; 7 $scope.addAlert = function() { 8 if (!$scope.typeSwitch) { 9 $scope.alerts.push({type: ‘success‘, msg: ‘开启关怀成功!‘}); 10 $scope.typeSwitch = true; 11 } else { 12 $scope.alerts.push({type: ‘warning‘, msg: ‘关闭关怀成功!‘}); 13 $scope.typeSwitch = false; 14 } 15 }; 16 17 $scope.closeAlert = function(index) { 18 $scope.alerts.splice(index, 1); 19 }; 20 });
标签：
原文地址：http://www.cnblogs.com/lomoye/p/5530729.html
