AngularJS：自动检测模型

变化假设我想这样做自动运行一些代码（如将数据保存到服务器），只要一个模型的值的变化。通过在每个可能改变模型的控件上设置如ng-change这样的唯一方法来做到这一点？AngularJS：自动检测模型

即与意见，正确的事情的模型，而无需显式连接什么东西改变而改变。有没有类似于能够运行保存到服务器的代码？像

myModel.on('change', function() { 
    $.post("/my-url", ...); 
});

像你可能会看到像骨干。

来源

2013-03-15 Alec

142

在{{}}和/或ng-model的意见中，Angular在幕后设置了$watch() es。

默认$watch比较由参考。如果您将第三个参数设置为$watch至true，则Angular将改为“浅显地”观察对象以进行更改。对于数组来说，这意味着比较数组项，对于对象映射来说，这意味着要观察属性。因此，这应该做你想要什么：

$scope.$watch('myModel', function() { ... }, true);

更新：角V1.2增加了对这种新的方法，`$watchCollection()：

$scope.$watchCollection('myModel', function() { ... });

注意单词“浅”是用来描述比较而不是“深”，因为没有遵循引用 - 例如，如果观看的对象包含属性值，该属性值是对另一个对象的引用，则该引用不会被用于比较另一个对象。

来源

2013-03-15 03:24:50

啊，太好了！是否有任何理由认为这似乎不是所有记录的（即，我不认为任何角度网站上的教程都提到直接设置$手表）？有没有什么不好的事情可以设置（可能是多个）输入控件上的'ng-change'钩子是一个更好的主意？ – Alec 2013-03-15 03:42:02

+12

是的，如果主要教程提到了$ watch，那就太好了。这种方法的“坏”之处在于，如果您的模型很大（每个摘要循环 - 输入字段中的每个按键都会导致此模型被深度脏检查，可能多次），这会非常耗时。。在这种情况下，选择$ watch（）或选择性的ng-change会更好。 – 2013-03-15 03:57:10

如果你需要根据它的样式表单元素的状态（修改/没有修改过）动态或测试一些值是否实际上已经改变了，你可以使用下面的模块，通过自己开发的： https://github.com/betsol/angular-input-modified

它将附加属性和方法添加到表单中，并且它是子元素。有了它，您可以测试某个元素是否包含新数据，甚至可以测试整个表单是否包含新未保存的数据。

您可以设置如下表：$scope.$watch('myForm.modified', handler)和处理程序，如果将某种形式的元素实际上包含新的数据或调用它是否逆转初始状态。

此外，您还可以使用单独的表单元素modified财产实际上减少通过AJAX调用发送到服务器的数据量。没有必要发送不变的数据。

作为奖励，你可以恢复你的形式通过调用到初始状态形成的reset()方法。

你可以在这里找到该模块的演示： http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

干杯！

来源

2014-10-13 11:29:49

有没有办法在控制器中检查这个。例如，如果单击x按钮我可以像if（myform.modified）显示确认弹出窗口一样吗？ – Flash 2017-05-25 19:05:32

当然，只要将FormController传递给你的控制器的函数：''form name =“myForm”>'，'

谢谢，只有当表单被修改的时候，这样才会做些什么？ – Flash 2017-05-31 18:30:40

AngularJS：自动检测模型

回答

相关问题