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() { ... });