Question

使用Angular，是否可以在更改（编程或其他方式）时比较旧值和新值？

我想我之后的功能类似于ng-change，可以应用于任何元素，只要更新表达式中的值，就会触发。

当然，我可以在整个数据模型上使用$ scope。$ watch，查找单个更改的值（并注入＆＃39; changeDirection＆＃39;属性）但这感觉过度。

编辑：考虑一个包含500个对象的数组的数据模型，每个对象有5个属性，其中2个是我需要知道的整数，如果它们已经增加/减少。

Answer 1

您可以在点分隔路径上使用$ watch来表示您要观看的模型中的各个属性。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="ctrl">
    <input ng-model="model.name.first" />Update:{{watchVals}}
  </div>
  
  <script>
    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope",
      function($scope) {

        $scope.model = {
          "name": {
            "first": "John",
            "last": "Doe"
          }
        };

        $scope.val = "";
        $scope.$watch("model.name.first", function(newVal, oldVal) {
          $scope.watchVals = oldVal + " -> " + newVal;
        });
      }
    ]);
    angular.bootstrap(document, [app.name]);
  </script>
</body>

</html>

＆＃13;

Answer 2

我建议使用$ watch来观察对象更改，你可以将新值和旧值传递给这样的函数：

$scope.$watch('myObject', function(newValue, oldValue){
    if(!angular.equals(newValue, oldValue)){
       doSomeThing(); 
    }
});

Answer 3

ng-change（角度内置指令）和$watch之间几乎没有关键区别。

考虑这个html标记

<input type=text ng-model=obj.name ng-change="triggerNameChanged()">

使用ng-change只会调用triggerNameChanged（）函数用户对输入的实际更改。但是，也会调用Watch 其他情况也是如此 - 当他们第一次被定义时关于不是由用户进行的值的改变，例如编程。
每当您在内部编写{{}}表达式时，都会设置监视以查找模型中的更改。
使用ng-change的性能更高一些，因为它使用了少一个监视表达式。由于Angular知道它只应该在变更事件上调用表达式，因此不需要在每个摘要周期中对其进行评估，而不是观察。
默认情况下，$ watch按引用进行比较。如果将第三个参数设置为true，则Angular会“浅”地观察对象以进行更改。

观看示例

$scope.$watch('myForm.modified', handler)

在这种情况下，如果某些表单元素实际上包含新数据或者它反转到初始状态，则会调用处理程序。您可以使用单个表单元素的modified属性来实际减少发送到服务器的数据量。

Angular - 比较许多新旧价值观

3 个答案:

观看示例