检测哪个字段被实际修改

我创建了一个使用Angular JS进行验证的简单表单。该表单有一个保存和修改按钮。如果用户点击修改按钮，它允许他们改变他们的输入/字段。另一件很酷的事情是，如果事情真的被修改了，它会继续保持高亮显示橙色（这样用户就知道表单的哪一部分被修改了），但如果没有修改，那么一旦离开现场就没有边界。我的问题/新要求如下：如果假设我继续进入名称字段，例如，我更改它，然后决定返回原来写入的内容，然后在原来的位置上应该没有橙色突出显示领域。我如何做到这一点？因此，如果我将字段从A更改为B，但将其更改回A，则不应出现边框，因为我最终没有更改该值。我不知道如何做到这一点。任何建议/指导/教程，可以帮助我解决这个问题将不胜感激。我有我的代码片段下面检测哪个字段被实际修改

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="[email protected]"></script> 
    <script> 
    var app = angular.module("app", []); 
    app.controller("ctrl", function($scope) { 


    }); 
    </script> 
    <style> 
    .someCSS { 
     border: 5px solid orange; 
    } 
    </style> 
</head> 

<body ng-app="app" ng-controller="ctrl"> 

    <form name="custForm"> 
    Name: 
    <input id="name" ng-class="{someCSS: custForm.name.$dirty}" ng-model="someModel.name" /> 
    <br> email:(change some value) 
    <input id="email2" name="email2" ng-class="{someCSS: custForm.email2.$dirty}" ng-model="someModel.email2" /> 

    </form> 
    Touched:{{custForm.name.$touched}} 
    <br> dirty:{{custForm.email2.$dirty}} 
    <br> 

</body>

来源

2017-03-01 afzaaldeveloper1

使用[ngFormController。$ setUntouched方法]（https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched）。 – georgeawg

我们有一个类似的情况 - 但甚至添加了一个撤消按钮。当第一次填充模型时，我们存储了副本（使用$ angular.copy进行深层副本）。然后，当一个字段发生变化时，该指令会查看旧值与新值的比较结果。例如。 <input ng-class="{highlight-orange:old.name !== new.name}" />

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script> 
     var app = angular.module('myApp', []); 

     app.service('mySvc', function() { 
     this.getData = function() { 
      return { firstName:'Jack', lastName:'Sparrow' }; 
     } 
     }); 

     app.controller('myCtrl', function($scope, mySvc) { 
     $scope.old = mySvc.getData(); 
     $scope.new = angular.copy($scope.old); 
     }); 
    </script> 
    <style> 
     .different { color: red; } 
    </style> 
    </head> 

    <body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
     <p>Name : <input type="text" ng-model="new.firstName" ng-class="{different:new.firstName !== old.firstName}"></p> 
     <h1>Hello {{(new.firstName === old.firstName) ? 'Good, old' : 'Happy, new'}} {{new.firstName}}</h1> 
    </div> 
    </body> 
</html>

复制上面的代码到一个文件，然后将其加载到浏览器中。

来源

2017-03-01 18:49:06 Paurian

Hi Paurian，你可能会分享你写的代码显示这个吗？（或片段/演示）？ – afzaaldeveloper1

答案已被修改以显示代码示例。让我知道这是否有用。 – Paurian

检测哪个字段被实际修改

回答

相关问题