La directiva ng-change en AngularJS se usa cada vez que cambia el valor de un elemento de entrada. La expresión se evalúa inmediatamente cada vez que hay un cambio en el valor de entrada. Requiere una directiva ng-model para estar presente. Se activa cada vez que hay un solo cambio en la entrada. Se puede usar con elementos de entrada como <input>, <textarea>, <checkbox> y <select>
Sintaxis:
<element ng-change="expression"> Contents... </element>
Donde expresión se refiere a la expresión que se ejecutará cada vez que cambie el valor de entrada.
Ejemplo 1: este ejemplo usa la directiva ng-change para mostrar/ocultar algún contenido usando la casilla de verificación.
<!DOCTYPE html>
<html>
<head>
<title>ng-change Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script type="text/javascript">
var app = angular.module('geek', []);
app.controller('app', function ($scope) {
$scope.show = function () {
if ($scope.check == true)
$scope.result = true;
else
$scope.result = false;
}
});
</script>
</head>
<body style="padding: 30px">
<div ng-app="geek" ng-controller="app">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-change Directive</h2>
Check to show/hide details <input type="checkbox"
ng-change="show()" ng-model="check">
<br><br>
<div style="padding:10px; border:1px solid black;
width:30%;color:green" ng-show='result'>
GeeksforGeeks is the computer science
portal for geeks.
</div>
</div>
</body>
</html>
Salida:
Antes de marcar la casilla de verificación: 
Después de marcar la casilla de verificación:
Ejemplo 2: este ejemplo devuelve el número de veces que se cambia el estado de la casilla de verificación y también el estado actual de la casilla de verificación.
<!DOCTYPE html>
<html>
<head>
<title>ng-change Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="geek" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-change Directive</h2>
<div ng-controller="prop">
<div>
Are you a developer:
<input type="checkbox" ng-model="isTrue"
ng-change="cnt=cnt+1" ng-init="cnt=0"/>
</div>
Count: {{cnt}}
<pre>{{isTrue}}</pre>
</div>
<script>
var app = angular.module("geek", []);
app.controller('prop', ['$scope', function ($app) {
$app.isTrue = false;
}]);
</script>
</body>
</html>
Salida:
Antes de marcar la casilla de verificación: 
Después de marcar la casilla de verificación:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA