Download full example code from here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Start watch form field change listener - Angular JS</title>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="angular.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="MyCtrl">
<form name="myForm">
<table>
<tr>
<td>Name</td>
<td><input type="text" data-ng-model="dataObject.Name"></td>
</tr>
<tr>
<td>Group</td>
<td>
<select data-ng-model="dataObject.Group">
<option value="GROUP_1">Group 1</option>
<option value="GROUP_2">Group 2</option>
<option value="GROUP_3">Group 3</option>
</select>
</td>
</tr>
<tr>
<td>Radio</td>
<td>
<input type="radio" data-ng-model="dataObject.Radio" value="1"/>
<input type="radio" data-ng-model="dataObject.Radio" value="2"/>
</td>
</tr>
<tr>
<td>Checkbox</td>
<td>
<label ng-repeat="Option in Options">
<input type="checkbox" name="OptionValues[]" value="{{Option.Id}}" ng-model="Option.Checked">
{{Option.Name}}
</label>
</td>
</tr>
<tr>
<td>Type</td>
<td><input type="text" data-ng-model="Type"></td>
</tr>
</table>
<div class="log"></div>
</form>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []), log = $(".log");
myApp.controller('MyCtrl', ['$scope', function($scope) {
/* Start watching Object */
$scope.dataObject = {Name: "", Group: "GROUP_1", Radio: "1"};
$scope.$watch('dataObject', function(newVal, oldVal) {
$scope.printChangedField(newVal, oldVal);
}, true);
$scope.printChangedField = function(newVal, oldVal) {
Object.keys(oldVal).forEach(function (key) {
if(newVal[key] != oldVal[key]) {
log.prepend('Field \"' + key + '\" Changed From=\"' + oldVal[key] + '\" To=\"' + newVal[key] + '\"<BR>');
}
});
};
/* Start watching checkboxes */
$scope.Options = [
{Id: 1, Name: "One", Checked: true},
{Id: 2, Name: "Two", Checked: false},
{Id: 3, Name: "Three", Checked: true}
];
$scope.OldOptions = [];
$scope.$watch('Options', function (nv) {
$scope.NewOptions = $.grep(nv.map(function (Option) {
return Option.Checked ? Option.Name : null;
}), function(Name) {
return Name != null;
});
log.prepend('Field \"Options\" Changed From=\"' + $scope.OldOptions + '\" To=\"' + $scope.NewOptions + '\"<BR>');
$scope.OldOptions = $scope.NewOptions;
}, true);
/* Start watching specific field */
$scope.Type = "";
$scope.$watch('Type', function(newVal, oldVal) {
if(newVal != oldVal) {
log.prepend('Field \"Type\" Changed From=\"' + oldVal + '\" To=\"' + newVal + '\"<BR>');
}
}, true);
}]);
</script>
</body>
</html>
Sample Example:
No comments:
Post a Comment