Angularjs 检测实际修改的字段_Angularjs

Angularjs 检测实际修改的字段

angularjs

Angularjs 检测实际修改的字段,angularjs,Angularjs,我创建了一个使用Angular JS进行验证的简单表单。表单有一个保存和修改按钮。如果用户点击modify（修改）按钮，则允许他们更改输入/字段。另一件很酷的事情是，如果某个内容确实被修改了，它将继续保持高亮显示的橙色（以便用户知道表单的哪个部分被修改了），但是如果没有修改任何内容，那么一旦离开该字段，就没有边框了。我的问题/新要求如下：例如，如果假设我继续使用name字段，我将其更改，然后决定返回最初编写的内容，那么理论上，字段上应该没有橙色突出显示。我如何做到这一点？因此，如果我将字段从A

我创建了一个使用Angular JS进行验证的简单表单。表单有一个保存和修改按钮。如果用户点击modify（修改）按钮，则允许他们更改输入/字段。另一件很酷的事情是，如果某个内容确实被修改了，它将继续保持高亮显示的橙色（以便用户知道表单的哪个部分被修改了），但是如果没有修改任何内容，那么一旦离开该字段，就没有边框了。我的问题/新要求如下：例如，如果假设我继续使用name字段，我将其更改，然后决定返回最初编写的内容，那么理论上，字段上应该没有橙色突出显示。我如何做到这一点？因此，如果我将字段从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>


var-app=angular.module（“app”，[]）；
应用程序控制器（“ctrl”，函数（$scope）{
});
.一些{
边框：5px纯橙；
}
姓名：

电子邮件：（更改某些值）
触摸：{{custForm.name.$toucted}

脏：{{custForm.email2.$dirty}}

我们有一个类似的案例，但甚至添加了一个撤销按钮。第一次填充模型时，我们存储了一个侧面副本（使用$angular.copy作为深度副本）。然后，当一个字段发生更改时，指令会将旧值与新值进行比较。例如，


var-app=angular.module（'myApp'，[]）；
app.service（'mySvc'，function（）{
this.getData=函数（）{
返回{firstName:'Jack'，lastName:'Sparrow'}；
}
});
app.controller（'myCtrl'，函数（$scope，mySvc）{
$scope.old=mySvc.getData（）；
$scope.new=angular.copy（$scope.old）；
});
.不同的{颜色：红色；}
姓名：
你好{{（new.firstName==old.firstName）？'Good，old'：'Happy，new'}{{new.firstName}}

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

使用.Hi Paurian，您是否可以共享您编写的显示此内容的代码？（或代码片段/演示）？答案已修改为显示代码示例。让我知道这是否有用。

<!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>