javascript - AngularJS:在文本字段中更改 ng-model 时设置单个表单字段的样式

Question

所以我已经问过几次类似的问题，恐怕我不够具体。

假设在我的 Controller 中有一个名为“guy”的人类型对象，如下所示:

{"ID"        : "1234",
 "firstName" : "Bob",
 "lastName"  : "Michael",
 "phone"     : "555-555-5555",
}

(注意:我正在使用的对象与此相似 -- 但它要大得多)

现在假设我有一个带有表单和搜索框的网页。表单为对象中的每个属性都有一个字段，如下所示:

<label for="inputFirstName"> First Name: </label>
<input type="text" id="inputFirstName" ng-model = "person.firstName">

<label for="inputLastName"> Last Name: </label>
<input type="text" id="inputFirstName" ng-model = "person.lastName">

<label for="inputPhone"> Phone Number: </label>
<input type="text" id="inputPhone" ng-model="person.phone">

当在页面上搜索“ID”号码时，表单会填充对象中的相应数据。页面上还有一个“导入”按钮。当按下这个按钮时，一个人对象被带到 Controller 中，除了 firstName 现在是“Dan”而 phone 现在是“111-111-1111”之外，它与 guy 相同。变量“guy”被设置为等于这个新导入的对象，有效地改变或“更新”了这些变化的对象。正如预期的那样，这些更改会立即显示在表单中。

我希望能够在按下导入按钮后突出显示已更改的字段。但是，我的尝试没有成功。我试着做这样的事情:

 <label for="inputFirstName" 
        ng-class = "{ 'newCSS' : !!hasChanged }"> 
    First Name: 
 </label>
 <input type="text" 
        id=inputFirstName" 
        ng-model="person.firstName" 
        ng-change = "hasChanged = true">

但这仅在我手动在文本框中键入更改时有效——在我单击导入按钮并且实际对象本身已更改时无效。之前问这个问题的时候，有人建议我这样使用$watch:

Controller 函数 demoCtrl ($scope) {

$scope.$watch('myModel', function (newValue, oldValue) {
    if (newValue) {
       $scope.hasChanged = true;
    }
 }, true);

$scope.changeMyModel = function () {
   $scope.myModel = 'wonderful';
 };

}

HTML

  <label for="stuff" ng-class="{ 'newCSS' : !!hasChanged }">Stuff</label>
  <input type="text" id="stuff" ng-model="myModel" ng-change="hasChanged = true">

  <button ng-click="changeMyModel()">change model</button>

</div>

但这也行不通。一方面，当我按下按钮时 $watch 似乎没有注册，所以我还没有让它成功运行。另一方面，我不确定这对我正在尝试做的事情有何影响。假设我所有的标签/输入都是这样设置的，即使只有一个字段被更改，难道不会突出显示所有字段，因为如果新对象的一个​​属性与旧对象不同， hasChanged 将切换为 true 吗？

Bleh..我只是有点困惑。我将如何成功实现呢？ (即导入更改时，已更改的字段会突出显示)

Answer 1

在过去，为了实现这一点，我使用 Angular.copy 在范围内创建对象的副本，然后比较原始对象和当前对象。

像这样

Controller

$scope.originalPerson = $angular.copy($scope.person);

查看

<label for="inputFirstName" 
       ng-class="originalPerson.firstName == person.firstName ? oldCss:newCss">
        First Name:
</label>