ng-repeat with filtering - 一旦过滤完成就触发事件

时间:2018-03-09 00:27:43

标签: angularjs angularjs-ng-repeat filtering angular-filters

我想在ng-repeat列表上完成过滤后捕获事件。我正在过滤一个非常大的数据集,并希望通过旋转图标通知用户仍在进行过滤。一旦过滤完成,我想停止旋转图标。但是,我很难知道过滤何时完成。

我已尝试在ng-repeat元素上使用指令,但这仅适用于初始调用,并且不考虑过滤。

我也尝试在过滤器功能上使用$ scope。$ watch,但是当过滤完成时,这似乎也不会触发。

<div>
    <input ng-show="showCustNameFilter()"
    type="text"
    ng-model="criteria.custName"
    placeholder="look up customer ...">

    <div class="col-md-3" style="margin-top:5px; float:right">
        <button type="button" class="btn btn-block btn-primary" ng-click="filter()">
            <span ng-show="filtering"><i class="glyphicon glyphicon-refresh spinning"></i></span>
            <span ng-show="!filtering"><i class="fa fa-filter"></i></span>   Filter
        </button>
    </div>
</div>

<ul>
    <li ng-repeat="i in ts.items  | filter : customerNameFilter">
          <p>{{i.site.custCode}}</p>                            
    </li>
</ul>

的JavaScript

$scope.filterCustName = undefined;
$scope.filtering = false;

$scope.filter = function () {
    $scope.filtering = true;            
    if ($scope.criteria.custName !== undefined) {
        $scope.filterCustName = $scope.criteria.custName;
        $scope.filterCustCode = undefined;
    }
    $scope.filtering = false; //this has no affect...
};

$scope.customerNameFilter = function (item) {
    if ($scope.filterCustName !== undefined)
        return item !== undefined ? 
               item.site.custName.indexOf($scope.filterCustName) > -1 : true;
    else
        return true;
};

提前致谢!

0 个答案:

没有答案