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来获得当前代码的等效功能，除了neater：

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

Answer 2

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

Answer 3

您可以使用可以调用搜索功能的ng-change指令将其添加到您的所有输入中，这样当其中一个输入更改时，将调用搜索功能。

   <input type="text" class="form-control" data-ng-change="search()" data-ng-model="filters.fname">

$ watch on form element

3 个答案: