javascript - 简单的 $scope.$watch 没有被调用？

Question

我有一个简单的表格应用程序，它从数据库获取 JSON 数据。它通过参数将数据传递到我的应用程序 Controller ，然后应用程序 Controller 过滤数据。这很好用。然而，它的数据量很大(数十万个对象)。我有一些搜索框，用于尝试过滤数据，当搜索监视应该被调用时(当有人在搜索框中输入内容时)，它却没有被调用。我错过了什么吗？

js:

var app = angular.module('SortingTables', ['ui.bootstrap']);
//Dependencies which are services, providers or factories must map to string types, which are then passed into the instance function

app.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

app.controller('Ctrl', function ($scope, filterFilter, dataTable) {
    $scope.currentPage = 1;
    $scope.itemsPerPage = 25;
    $scope.totalItems = 0;
    $scope.predicate = '';
    $scope.searchBuffer = {
        $: ''
    };
    $scope.filtered;
    //This function has sort of been abstracted...
    //The purpose of this function is to delay the update so the user gets a chance to finish typing before the filter is applied.
    //Newer versions of angularjs have the ng-model-options: debounce=100 but we can't use that since we have IE 8 on dev boxes


    $scope.$watch('searchBuffer', function (term) {
        console.log('The watch on searchBuffer was called');
        $scope.filtered = filterFilter(dataTable, term);
        $scope.totalItems = $scope.filtered.length;
    });

    $scope.pageChanged = function () {
        $scope.currentRow = $scope.currentPage * $scope.itemsPerPage - $scope.itemsPerPage;
    };
});

html

<div ng-app="Components" ng-controller="Ctrl">
    <hr/>
    <table class="table table-striped">
        <tr>
            <th><a href="" ng-click="predicate = '\'Technical Owner\''; reverse=!reverse">Technical Owner</a>
                <br />
                <input type="search" ng-model="searchBuffer['Technical Owner']">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Branch</a>
                <br />
                <input type="search" style="width: 40px" ng-model="searchBuffer.Branch">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Sub Pillar</a>
                <br />
                <input type="search" ng-model="searchBuffer['Sub Pillar']">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Path'; reverse=false">Path</a>
                <br />
                <input type="search" ng-model="searchBuffer.Path">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Name</a>
                <br />
                <input type="search" ng-model="searchBuffer.Name">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Description'; reverse=!reverse">Description</a>
                <br />
                <input type="search" ng-model="searchBuffer.Description">
                </a>
            </th>
        </tr>
        <tr ng-repeat="ComponetOwner in filtered | startFrom:currentPage | orderBy:predicate:reverse | limitTo:itemsPerPage">
            <td>{{ComponetOwner["Technical Owner"]}}</td>
            <td>{{ComponetOwner.Branch}}</td>
            <td>{{ComponetOwner["Sub Pillar"]}}</td>
            <td>{{ComponetOwner.Path}}</td>
            <td>{{ComponetOwner.Name}}</td>
            <td>{{ComponetOwner.Description}}</td>
        </tr>
    </table>
    <pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
</div>

当我在搜索框中输入内容时，$watch 不会被调用。这是怎么回事？

Answer 1

searchBuffer 是一个对象。 $watch 的第三个可选参数需要设置为 'true' 以监视对象/数组(即深度监视)。

阅读此内容: $watch an object