檢測哪個字段被實際修改

我創建了一個使用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

檢測哪個字段被實際修改

回答

相關問題