Description :
This is very simple example of the ng-change directive. In this we have a checkbox and on the change of the checkbox we increment the value of the count variable by 1. The value of count variable is increment by 1 as you checked and unchecked the checkbox and below the checkbox we display the value of isTrue variable which is bind with this checkbox.
<!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="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer <input type="checkbox" ng-model="isTrue" ng-change="count=count+1" />
Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = true;
}]);
</script>
</body>
</html>
Description :
<!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="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well" ng-init="count=0">
Courses: <select ng-change="ngChangeCount()" class="form-control" ng-model="course" ng-options="cr.course as cr.course for cr in courses"></select>
<pre> ({{course}}) ng-Change {{count}} </pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.course = "Angular";
$scope.courses = [{ course: "Angular" }, { course: "JQuery" }, { course: "Bootstrap" }];
$scope.ngChangeCount = function () {
$scope.count = $scope.count + 1;
}
}]);
</script>
</body>
</html>
Description :
In this example we have a textbox and when you type in the textbox the value changes and on the change of the value we increment the value of count variable by 1 by calling function on the change event using the ng-change directive. The value of count variable is display below the 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>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well" ng-init="count=0">
First Name: <input type="text" class="form-control" ng-change="isTextChange()" ng-model="text" />
<pre><b>Changed</b> {{isChange}} {{count}} </pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isChange = false;
$scope.isTextChange = function () {
$scope.isChange = true;
$scope.count = $scope.count + 1;
}
}]);
</script>
</body>
</html>
Description :
In this example we have a textbox and when you type in the textbox the value changes and on the change of the value we increment the value of count variable by 1 by calling function on the change event using the ng-change directive. The value of count variable is display below the 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>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well" ng-init="count=0">
Male: <input type="radio" ng-model="radio1" value="Male" ng-change="layout(radio1)" />
Female: <input type="radio" ng-model="radio2" value="Female" ng-change="layout(radio2)" />
<pre><b>Changed</b> {{radio1}} </pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.layout = function (rdo) {
$scope.radio1 = rdo;
$scope.radio2 = rdo;
}
}]);
</script>
</body>
</html>
Description :
In this example we have checkbox and with the help of ng-change directive we call a function which assign the true or false value to the $scope.showhideprop variable. If we checked the checkbox then true value assign to this variable and a container with text shows and if we unchecked the checkbox then the false value assign to this variable and container will hide.
<!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="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Show or Hide Div: <input type="checkbox" ng-model="chkStatus" ng-change="showHideDiv(chkStatus)" /> <br>
</div>
<div class="col-md-3 well" ng-show='showhideprop'>
Hi Welcome to Angularjs... Hello World
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.showHideDiv = function (chkStatus) {
$scope.showhideprop = chkStatus;
}
}]);
</script>
</body>
</html>
Description :
In this example we have a textbox to hide and show the container with text. With the help of ng-change directive we calling a funtion on change of the textbox value , we change the visibility of the container in this function. When we call the funtion we pass the value of the textbox and if value is show then we set the value of $scope.showhideprop variable to true which will show the container and if textbox has hide value then we set the value of $scope.showhideprop variable to false which will hide the container.
<!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="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Write Show or Hide: <input type="text" ng-model="textVal" ng-change="showHideDiv(textVal)" />
<br />
<br />
<span ng-show='showhideprop'>Hi Welcome to Angularjs... Hello World</span>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.showHideDiv = function (chkStatus) {
if (chkStatus == 'Hide' || chkStatus == 'hide' || chkStatus == 'HIDE')
$scope.showhideprop = false;
else if (chkStatus == 'Show' || chkStatus == 'show' || chkStatus == 'SHOW')
$scope.showhideprop = true;
}
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Change, We have 4 records in object and we will filter the records based on the selection so we have checkbox to select active of inactive records. So if user select the checkbox, it will show the active records. Here is the HTML code to filter the record: {{row.Active?'Active':'Disabled'}} {{row.text}}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></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="app">
<div class="container">
<div class="row" ng-controller="myController">
<div class="col-md-12">
<br />
<br />
<div class="row">
<div class="col-md-9">
Filter Active Records
</div>
<div class="col-md-3">
<div class="row form-group">
<div class="col-md-2 control-label">Active</div>
<div class="col-md-10">
<input type="checkbox" ng-model="active" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<tbody>
<tr ng-repeat="row in records | filter:active" style="cursor:pointer">
<td>{{row.Active?'Active':'Disabled'}}</td>
<td>{{row.text}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.records = [{ Active: true, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' },
{ Active: true, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' },
{ Active: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' },
{ Active: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' }]
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Change, we have a dropdown with two values circle and rectangle, so on change of drop down selection the span will get changed from circle to rectangle. Html code: $scope.changeShape = function () { $scope.listShape == "Circle" ? $scope.circle = true : $scope.circle = false; }; See the output:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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="app">
<div class="container">
<div class="row well" ng-controller="myController">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" ng-init="listShape='Circle'">
<select class="form-control" ng-model="listShape" ng-change="changeShape()">
<option value="Circle">Circle</option>
<option value="Square">Square</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div ng-repeat="spec in specifications">
<span ng-show="circle"><i class="fa fa-circle"></i></span><span ng-hide="circle"><i class="fa fa-square"></i></span> <span><b>{{spec}}</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.circle = true;
$scope.changeShape = function () {
$scope.listShape == "Circle" ? $scope.circle = true : $scope.circle = false;
};
$scope.specifications = ["Ram : 4GB", "HD : 500GB", "Processor : i3", "Graphics Card : ATI (1 GB)"];
}]);
</script>
</body>
</html>