Created
July 4, 2014 10:30
-
-
Save Anticom/e198bbc527de6ef3e53e to your computer and use it in GitHub Desktop.
AngularJS - Timed $watch test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: white; | |
| } | |
| .model-box { | |
| padding: 1em; | |
| border: 1px solid #ccc; | |
| -webkit-border-radius: 10px; | |
| border-radius: 10px; | |
| } | |
| .log { | |
| display: block; | |
| background-color: #efefef; | |
| border: 1px solid #ccc; | |
| height: 18em; | |
| overflow: auto; | |
| -webkit-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.4); | |
| -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.4); | |
| box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.4); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('watchApp', []); | |
| app.controller('WatchCtrl', function($scope, $timeout) { | |
| $scope.log = ''; | |
| $scope.model = {}; | |
| var timeoutPromise; | |
| var delayInMs = 1000; | |
| $scope.$watch( | |
| 'model', | |
| function (newVal, oldVal) { | |
| //does nothing, if timeout alrdy done | |
| $timeout.cancel(timeoutPromise); | |
| //Set timeout | |
| timeoutPromise = $timeout( | |
| function(){ | |
| $scope.log += JSON.stringify(oldVal)+'->'+JSON.stringify(newVal)+"\n"; | |
| //$scope.log += JSON.stringify($scope.model)+"\n"; | |
| }, | |
| delayInMs | |
| ); | |
| }, | |
| true | |
| ); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="watchApp"> | |
| <head> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="app.css" rel="stylesheet" type="text/css" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body ng-controller="WatchCtrl"> | |
| <div class="container-fluid"> | |
| <h1>AngularJS $watch tests</h1> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h2>Model</h2> | |
| <div class="model-box"> | |
| <div class="form-group"> | |
| <label for="inpName1">First Name</label> | |
| <input type="text" class="form-control" id="inpName1" placeholder="First Name" ng-model="model.firstName"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="inpName2">Last Name</label> | |
| <input type="text" class="form-control" id="inpName2" placeholder="Last Name" ng-model="model.lastName"> | |
| <p class="help-block">Example block-level help text here.</p> | |
| </div> | |
| <div class="checkbox"> | |
| <label> | |
| <input type="checkbox" ng-model="model.checkBox"> Check me out | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <h2>Log</h2> | |
| <pre class="log">{{ log }}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="//code.jquery.com/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment