javascript - 使用 Angular js 检测 JS 对象的变化

Question

我有一个 javascript 对象，假设 user 是我的对象的名称，在 Angular js 中它看起来像这样

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

我从数据库中获取该对象并在编辑屏幕中打开，现在如果在 HTML 表单中，如果用户在编辑模式下更改了任何字段，我想使用我的 CSS 类 applyborder 突出显示特定字段。当我更改任何字段值时，我的逻辑第一次起作用，但是当我将值重置为原始值时，应该删除该类，但它并没有删除该类。我的 Angular 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，但它应该对待来自数据库的值。谢谢。

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");
                }
            });
        });