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