5

データの大きなリスト（4000以上のアイテム）があります。入力を開始すると、ブラウザがフリーズします (最大 15 秒)。そのため、オートフィルター機能をオフにして、フィルター機能をボタンクリックにバインドする必要があります。Google で回答を探しても結果は得られませんでした。どうすればこれを行うことができますか? お願い助けて ：）

コード：

<input ng-model="search.phone" type="text" placeholder="Телефон...">
<input ng-model="search.name" type="text" placeholder="Имя...">
<input ng-model="search.city" type="text" placeholder="Город...">

<div ng-repeat="user in users | filter:search" class="user_block" ng-include src="userTemplate"></div>

およびコントローラー:

app.controller("smsCtrl", ['$scope', 'smsData', 'createDialog', '$http', '$filter', function($scope, smsData, createDialog, $http, $filter){...}
4

3 に答える 3

10

私は同僚を助けているときに似たようなことに遭遇しました (私たちの場合、手動でトリガーされた検索のフィルタリングは望ましいものでしたが)、同様の、しかし少し単純な解決策を思いつきました。

元の繰り返し div を使用します。

<div ng-repeat="user in users | filter:search">
    ...
</div>

ユーザー入力を格納するためのオブジェクトを作成します。

$scope.search = {};
$scope.userInput = {};

入力をこのユーザー入力オブジェクトに添付します。

<input type="text" ng-model="userInput.name" />
<input type="text" ng-model="userInput.phone" />
<input type="text" ng-model="userInput.city" />

ユーザー入力オブジェクトのプロパティをループして検索オブジェクトにコピーする関数を作成します。

$scope.applySearch = function() {
    for(prop in $scope.userInput) {
        $scope.search[prop] = $scope.userInput[prop];
    }
};

最後に、検索機能を呼び出すボタンを作成します。

<button ng-click="applySearch()">Search</search>

これが誰かに役立つことを願っています。

于 2015-10-01T15:47:50.110 に答える
0

解決策を見つけました！

変化する：

<div ng-repeat="user in users | filter:search" class="user_block" ng-include src="userTemplate"></div>

に：

<div ng-repeat="user in users" ng-hide="user.excludedByFilter" class="sms_user_block" ng-include src="userTemplate"></div>

コントローラーに「applySearchFilter」関数を追加

    $scope.applySearchFilter = function() {
        var nameFilter = $scope.filters.name.toLowerCase();
        var phoneFilter = $scope.filters.phone;
        var cityFilter = $scope.filters.city;
        var showAll = 0 === nameFilter.length && 0 === phoneFilter.length && 0 === cityFilter.length;
        angular.forEach($scope.users, function(user) {
            if (showAll) {
                user.excludedByFilter = false;
            } else {
                user.excludedByFilter = (user.name.toLowerCase().indexOf(nameFilter) === -1) 
                                        || (user.phone.indexOf(phoneFilter) === -1) 
                                        || (user.city.indexOf(cityFilter) === -1);
            }
        });
    }

フィルタ ボタンの html コードを追加します。

<a class="btn btn-primary" href="#" ng-click="applySearchFilter()">Apply filters</a>

そして、これはうまくいきます！

*入力で ng-model="search.*" を ng-model="filters.*" に名前を変更したことに注意してください。

于 2013-11-07T14:41:07.307 に答える