Description :
We can display or hide the div element on the basis of value of isShow variable.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="">
<form name="form">
<div ng-hide="isShow">
User Name <input type="text" required ng-model="userName" /><br /><br />
Password <input type="password" required ng-model="password" /><br /><br />
<input type="button" ng-disabled="form.$invalid" ng-click="isShow = true" value="Login" />
</div>
<div ng-show="isShow">
Successfully Login.<br />
<input type="button" ng-click="isShow = false;password='';userName=''" value="Logout" />
</div>
</form>
</body>
</html>
Description :
In this example ng-click directive call the showAlert() function which will show the alert "This is an example of ng-click".
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
<a href="javascript:void(0)" ng-click="showAlert()">Click Here </a>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.showAlert = function () {
alert("This is an example of ng-click");
}
}]);
</script>
</body>
</html>
Description :
In this example we can increase or decrease the value of count variable.In first button click we can decrease the value of count and on second button click we can increase the value of count because ng-click directive increase or decrease the value of count.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
<button ng-click="count=count-1"><i class="glyphicon glyphicon-chevron-left"></i></button> <button class="btn btn-primary btn-sm">{{count}}</button> <button ng-click="count=count+1"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.count = 0;
}]);
</script>
</body>
</html>
Description :
In this example we can increase the count1 and count2 variable on click of anchor element and button respectively.isCheck is a variable with ng-model directive which set the value of checkbox to isCheck variable.If isCheck is true it will not increase count2 because ng-disabled directive disable the button.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
Stop button counts: <input type="checkbox" ng-model="isCheck" /><br />
<a href="javascript:void:(0)" ng-click="count1=count1+1">Anchor</a>
<input type="button" ng-disabled="isCheck" ng-click="count2=count2+1" value="Button" /><br />
Anchor Clicks: {{count1}}<br />
Button Clicks: {{count2}}
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.count1 = 0;
$scope.count2 = 0;
}]);
</script>
</body>
</html>
Description :
In this example ng-click will the changeColor() function which is used to change the color of div and color of color code in pre element if we click on the button.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
<div class="container">
<button class="btn btn-primary" ng-click="changeColor()">Click On Me to generate random colors</button><br /><br />
<div style="height:100px;width:275px; background-color:{{color}};"> </div><br />
<pre style="width:275px; color:{{color}>;">{{color}}</pre>
</div>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.color = 'tomato';
$scope.Colors = ["aqua", "azure", "beige", "tan", "blue", "brown", "cyan",
"darkblue", " darkcyan", " darkgrey", "darkgreen",
" darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey", " lightpink", "lightyellow", "lime", "magenta", "maroon", " navy", " olive", " orange", " pink", "purple", " violet", " red ", " silver", "yellow "];
$scope.changeColor = function () {
var color = Math.floor(Math.random() * 40);
$scope.color = $scope.Colors[color];
}
}]);
</script>
</body>
</html>
Description :
In this example we can set and clear the value of textbox.Button having Set Value text will disable if textbox is empty.If we type in textbox then click on Set Value button it will display the value of textbox and button having Clear Value text will clear the value of textbox and set the text Learn It.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
<div class="container">
Name <input type="text" ng-model="myName" class='form-control' /><br /><br />
My name is: <b>{{name}}</b><br /><br />
<input ng-disabled="myName==null || myName==''" type="button" value="Set Value" ng-click="setValue(myName)" class='btn btn-default' />
<input type="button" value="Clear Value" class='btn btn-default' ng-click="name='Learn It' ; myName=''" />
</div>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.name = 'Learn It';
$scope.setValue = function (myName) {
$scope.name = myName;
}
}]);
</script>
</body>
</html>
Description :
In this example we can create list of options with ng-options directive.Selected textbox value will bind to myName variable with ng-model directive.If we click on button it will call the executeFunction(myName) with selected value as parameter which display alert of selected value of textbox.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
<div class="container" ng-init="names=[{name:'John'},{name:'Eric'},{name:'Hellen'}]">
Name <select class="form-control" ng-model="myName" ng-options="name.name as name.name for name in names"></select><br /><br />
<input class="btn btn-primary" type="button" value="Run" ng-click="executeFunction(myName)" />
</div>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.executeFunction= function (myName) {
if(myName != undefined)
alert(myName);
}
}]);
</script>
</body>
</html>
Description :
In this example of ng-click, we will use the animation to show and hide the div. Clicking on the button with text Slide Down will add the class slideDown which will basically show the div using animation and Slide Up button will hide the div. See the output:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
.fade {
border: 1px solid black;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height 2s ease-in-out;
transition: all 2s ease-in-out;
height: 0;
opacity: 0;
}
.fade.active {
height: 300px;
opacity: 1;
}
</style>
</head>
<body ng-app="">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<br />
<button ng-click="slideDown=true" class="btn btn-success">Slide Down</button>
<button ng-click="slideDown=false" class="btn btn-success">Slide Up</button>
<br />
<div class="fade" ng-class="{'active':slideDown}">
<div style="padding:40px">
<p>LearnKode is a website for Beginner and Professional to learn AngularJS step by step and the biggest advantage is that while learning you can experiment your code Online.</p>
<p>Contact Us</p>
<p>[email protected] </p>
<p>Panchkula, India</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>