pTutorial

New way to learn Programming

AngularJS Alert Bootstrap

AngularJS alert Example with bootstrap

AngularJS alert example : Angular alert example with bootstrap and separate JS file (Angular app). Using the code below you can validate form in controller, form field or element may be varies according to your need.

Form validation play important role in Computer Science or WEB Development.

AngularJS alerts example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://www.ptutorial.com/angularjs/
angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="">

<div class="container"> 
<div class="row">
<div class="form-group">
<label>Enter number to see the result</label>
<input type="text" class="form-control" ng-model="uk">
</div>
</div>
<h2 class="text-center">Bootstrap Alerts with AngularJS EXample</h2>
<div class="alert alert-info text-center" ng-hide="uk">
<strong>Info!</strong> Please enter 1-4 to see the result
</div>

<div class="alert alert-success text-center" ng-if="uk==1">
<strong>Success!</strong> This alert box is basically used for success.
</div>
<div class="alert alert-info text-center" ng-if="uk==2">
<strong>Info!</strong> This alert box is basically used for information.
</div>
<div class="alert alert-warning text-center" ng-if="uk==3">
<strong>Warning!</strong> This alert box is basically used for warning.
</div>
<div class="alert alert-danger text-center" ng-if="uk==4">
<strong>Danger!</strong> This alert box is basically used for danger.
</div>
</div>

</body>
</html>

Download

See Also


QUOTES OF THE DAY

Everything flows, nothing stays still.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER