Home > Developer > Web Develop
Original address: http://www.cnblogs.com/pilixiami/p/5699573.html
The alert command displays a message on the page that looks like this:
The code is:
<!DOCTYPE HTML><HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Linkhref= "/content/bootstrap.css"rel= "stylesheet" /> <title></title> <Scriptsrc= "/scripts/angular.js"></Script> <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script> <Script>Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Alertdemoctrl', function($scope) {$scope. Alerts=[{type:'Danger', msg:'error Message'}, {type:'Success', msg:'Success Message'}, {type:'Info', msg:'Prompt Message'}, {type:'Warning', msg:'warning Message' } ]; $scope. Addalert= function() {$scope. Alerts.push ({msg:'This is a piece of news!' }); }; $scope. Closealert= function(index) {$scope. Alerts.splice (Index,1); }; $scope. Addtplalert= function () { } }); </Script> <Scripttype= "Text/ng-template"ID= "alert.html"> <Div class="Alert"style="background-color: #fa39c3; color:white"role="Alert"> <Div ng-transclude></div> </div> </Script></Head><Body> <DivNg-controller= "Alertdemoctrl"> <Uib-alertng-repeat= "Alert in alerts"type= "{{alert.type}}"Close= "Closealert ($index)">{{alert.msg}}</Uib-alert> <Buttontype= "button"class= ' btnBtn-default ' Ng-click= "Addalert ()">ADD Alert</Button> <HR/> <Uib-alertTemplate-url= "alert.html">A warning box that uses a custom template!</Uib-alert> </Div></Body></HTML>
The properties that the alert command can use are:
| Property name | Default value | Note |
| Close | The function that is triggered when the message is closed. If this property is available, a close button is added to the right of the prompt message | |
| Dismiss-on-timeout | None | Set a time (in milliseconds) to automatically close the prompt message if there is a close attribute |
| Template-url | Uib/template/alert/alert.html | |
| Type | Warning | The type of the hint message. The configurable values are: danger,warning,info,success |
Angularjs UI Components Ui-bootstrap Share (ix)--alert
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
