Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <title>AngularJS - $scope.$watch( deepWatch )</title> </head> <body ng-app="mojApp"> Primjer treba pocrveniti one vrijednosti koje su izmjenjene u odnosu na prethodnu vrijednost. PRIMJER NE RADI DOBRO!!!! <hr> <br><br> <div ng-controller="MojCtrl"> <h3 ng-style="{color: obj.s1.boja}">broj1 = {{obj.s1.iznos+obj.s1.valuta}}</h3> <h3 ng-style="{color: obj.s2.boja}">broj2 = {{obj.s2.iznos+obj.s1.valuta}}</h3> <h3 ng-style="{color: obj.s3.boja}">broj3 = {{obj.s3.iznos+obj.s1.valuta}}</h3> Izmjeni brojeve: <br><input ng-model="unos1"> <br><input ng-model="unos2"> <br><input ng-model="unos3"> <br> <br><button ng-click="unesi()">UNESI</button> </div> <script src="../angularjs/1.2.9/angular.min.js"></script> <script> var mojModul = angular.module('mojApp', []); mojModul.controller('MojCtrl', function($scope){ //init object $scope.obj={ s1: {iznos:100, valuta:'Kn'}, s2: {iznos:25, valuta:'€'}, s3: {iznos:38, valuta:'$'}, boja:'silver' }; $scope.unos1=0; $scope.unos2=0; $scope.unos3=0; $scope.unesi=function(){ $scope.obj.s1.iznos=$scope.unos1; $scope.obj.s2.iznos=$scope.unos2; $scope.obj.s3.iznos=$scope.unos3; } $scope.$watch('obj', on_change, true); //true definira deepWatch function on_change(newValue,oldValue) { if (newValue.s1.iznos==oldValue.s1.iznos) $scope.obj.s1.boja='green'; else $scope.obj.s1.boja='red'; if (newValue.s2.iznos==oldValue.s2.iznos) $scope.obj.s2.boja='green'; else $scope.obj.s2.boja='red'; if (newValue.s3.iznos==oldValue.s3.iznos) $scope.obj.s3.boja='green'; else $scope.obj.s3.boja='red'; console.log(newValue.s1.iznos+'<-'+oldValue.s1.iznos); } }); </script> </body> </html>
Pregled stranice:
Pogledaj stranicu
../javascript/angularjs/primjeri/36deepwatch.html
.