Question

我有一个简单的表应用程序，它从数据库中获取JSON数据。它通过参数将数据传递给我的app控制器，然后控制器过滤数据。这非常有效。但是，它是很多数据（十万个对象）。我有用来尝试过滤数据的搜索框，当搜索手表应该被调用时（当有人在搜索框中输入内容时），它没有。我错过了什么吗？

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

Answer 2

您可以执行$watchCollection来查看对象中的所有对象。

不如为true函数设置第三个可选参数$watch那么深。

以下是一篇关于它的好博客：http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

简单的$ scope。$ watch没有调用？

2 个答案: