Home > Developer > Web Develop
The alert command displays a message on the page that looks like this:
The code is:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <Linkhref= "/content/bootstrap.css"rel= "stylesheet" />6 <title></title>7 8 <Scriptsrc= "/scripts/angular.js"></Script>9 <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script>Ten <Script> One A Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Alertdemoctrl', function($scope) { - $scope. Alerts= [ - {type:'Danger', msg:'error Message' }, the {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!' }); A }; at - $scope. Closealert= function(index) { - $scope. Alerts.splice (Index,1); - }; - $scope. Addtplalert= function () { - in } - }); to + </Script> - <Scripttype= "Text/ng-template"ID= "alert.html"> the <Div class="Alert"style="background-color: #fa39c3; color:white"role="Alert"> * <Div ng-transclude></div> $ </div>Panax Notoginseng </Script> - the </Head> + <Body> A <DivNg-controller= "Alertdemoctrl"> the <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>View Code
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
