javascript - Visually show Angular scope changes when made programmatically -
javascript - Visually show Angular scope changes when made programmatically -
is there way visually show when scoped input value changed programmatically?
i have several input fields bound various ng-model values, , these values alter outside user's control. (the alter tied button in illustration below simplicity.)
when values change, want input alter color or show kind of visual cue create obvious value isn't same sec ago. if there 1 field, done watch , adding css relevant input. however, in production there hundreds of values, don't have mapping of values shown in inputs, , if did, many inputs generated repeaters, hand coding countless watches out.
i hoping jquery highlight effect (http://api.jqueryui.com/highlight-effect/) @ point, i'd interested in visual alter @ see if can create work need.
sample fiddle here: http://jsfiddle.net/cdnaa8ew/1/
class="snippet-code-js lang-js prettyprint-override">angular.module('changesample', []) .controller('samplecontroller', ['$scope', function($scope) { $scope.a = 1; $scope.b = 2; $scope.c = 3; $scope.d = 4; $scope.e = 5; $scope.change = function() { var rand = math.floor(math.random() * 5); if (rand == 0) { $scope.a = $scope.a + 1; } if (rand == 1) { $scope.b = $scope.b + 1; } if (rand == 2) { $scope.c = $scope.c + 1; } if (rand == 3) { $scope.d = $scope.d + 1; } if (rand == 4) { $scope.e = $scope.e + 1; } }; } ]); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <body ng-app="changesample"> <form ng-controller="samplecontroller"> <input type="text" ng-model="a" /> <br/> <input type="text" ng-model="b" /> <br/> <input type="text" ng-model="c" /> <br/> <input type="text" ng-model="d" /> <br/> <input type="text" ng-model="e" /> <br/><span>{{a}}{{b}}{{c}}{{d}}{{e}}</span> <br/> <button ng-click="change()">change</button> </form> </body>
you can create simple directive add together class changed element. example:
.directive('highlight', function($timeout) { homecoming { require: 'ngmodel', link: function(scope, element, attrs) { var classname = attrs.highlight || 'highlight'; scope.$watch(attrs.ngmodel, function(newval, oldval) { if (newval !== oldval) { element.addclass(classname); $timeout(function() { element.removeclass(classname); }, 400); } }); } }; }); and utilize this:
<input type="text" ng-model="c" highlight /> <input type="text" ng-model="d" highlight="highlight-red" /> then can define whatever highlight style want using css:
.highlight-red { -webkit-transition: background .4s ease; transition: background .4s ease; background: #fe94b3; } demo: http://jsfiddle.net/cdnaa8ew/3/ javascript html angularjs angularjs-scope
Comments
Post a Comment