Question

我创建了一个使用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="angular.js@1.4.8"></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>

Answer 1

我们有类似的情况 - 但甚至添加了撤消按钮。在第一次填充模型时，我们存储了副本（使用$ 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>

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

检测实际修改了哪个字段

1 个答案: