Question

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

假设在我的控制器中我有一个名为“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”号时，表单将填充对象中的相应数据。页面上还有一个“导入”按钮。按下此按钮时，一个人对象被引入控制器，该控制器与guy相同，除了firstName现在是“Dan”，而phone现在是“111-111-1111”。变量“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：

控制器 function 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在范围内创建对象的副本，然后比较原始和当前。

像这样的东西

<强>控制器

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

查看

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

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

1 个答案: