javascript - 表单元素上的 $watch

Question

我正在尝试实现实时搜索，因此我有一个包含许多输入字段的搜索因此每次用户更新输入字段时都应该触发搜索功能。

我想出了 $watch 来跟踪表单字段上的模型更改

$scope.$watch('filters.site', function () {
    $scope.$broadcast('updateDataTable');
});
$scope.$watch('filters.fname', function () {
    $scope.$broadcast('updateDataTable');
});
$scope.$watch('filters.lname', function () {
    $scope.$broadcast('updateDataTable');
});

但我只是想知道是否有办法获得整个表单值的更改

我的表单看起来像

<form name="searchForm">
    <label for="">FIRST NAME</label>
    <input type="text"
            class="form-control"
            data-ng-model="filters.fname">
    <span></span>
    <label for="">LAST NAME</label>
    <input type="text"
            class="form-control"
            data-ng-model="filters.lname">
    <span></span>
    <label for="">SITE</label>
    <input type="text"
            class="form-control"
            data-ng-model="filters.site">
    <span></span>
</form>

谢谢

Answer 1

如果将 true 作为最后一个参数传递给 $watch，Angular 将监视深度相等，并且您可以立即监视整个对象:

$scope.$watch("filters", function() { ... }, true);

这将导致在每个摘要周期创建对象的副本，但如果您的所有过滤器对象包含这些过滤器，那么它可能不会比单独观看所有内容效率更低。如果您的过滤器对象由于某种原因复制成本很高，您也可以使用 $watchGroup 来获得与当前代码相同的功能，但更简洁:

$scope.$watchGroup(["filters.site", "filters.fname", ...], function() { ... });