使用Angular js

Question

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

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

此对象我从数据库中取出并在编辑屏幕中打开，现在如果在HTML表单中，如果用户在编辑模式下更改了任何字段，我想使用我的CSS类{{1}突出显示特定字段}。当我更改任何字段值时，我的逻辑第一次正在工作但是当我将值重置为原始值时，应删除该类，但它不会删除该类。我的角度js代码是：

applyborder

它将最后输入的值视为 //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"); } }); }); ，但它应该处理来自数据库的值。感谢。

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();