使用Angular js檢測JS對象中的更改

Question

我有一個javascript對象，假設user是我對象的名稱，在angular js中，它看起來像這樣

$scope.user = {
  name:'Arpit',
  class:'Computer Science',
  year:'2017',
  gender:'male'
}

我正在從數據庫中獲取此對象並在編輯屏幕中打開，現在，如果是HTML表單，如果用戶在編輯模式下更改了任何字段，我想使用CSS類applyborder突出顯示特定字段。 當我更改任何字段值時，我的邏輯第一次起作用，但是當我將值重置為原始值時，應刪除該類，但不能刪除該類。 我的角度js代碼是：

            //Value Change Detection
            Object.keys($scope.user).filter(function (key) {
                $scope.$watch('user.' + key, function (newVal, oldVal) {
                    if (newVal != oldVal) {
                        var ele = $('[ng-model="user' + '.' + key + '"]');
                        ele.addClass("applyborder");
                    }
                    else  if(oldVal == newVal){
                        var ele = $('[ng-model="user' + '.' + key + '"]');
                        ele.removeClass("applyborder");
                    }
                });
            });

它oldVal最后輸入的值視為oldVal但應將其視為來自數據庫的值。 謝謝。

Answer 1

這是$watch的預期行為。

您可以使用angular.copy從數據庫收到的對象的副本：

var originalUser = angular.copy($scope.user) 。

然后檢查：

//Value Change Detection
        Object.keys($scope.user).filter(function (key) {
            $scope.$watch('user.' + key, function (newVal, oldVal) {
                if (newVal != originalUser[key]) {
                    var ele = $('[ng-model="user' + '.' + key + '"]');
                    ele.addClass("applyborder");
                }
                else  if(originalUser[key] == newVal){
                    var ele = $('[ng-model="user' + '.' + key + '"]');
                    ele.removeClass("applyborder");
                }
            });
        });

Answer 2

只需在ng-dirty類下應用它即可。 您可能必須隔離css范圍，因此它不會在所有地方都得到應用。

<form class='myForm'>
  <input ng-model='xx' />
</form>

.myForm .ng-dirty {
  background-color: yellow;
}

如果您需要重置狀態，則需要為表單命名。

<form class='myForm' name='myForm'>

$scope.myForm.$setPristine();