javascript - Angularjs：大于使用 ng-repeat 的过滤器

Question

我正在对 ng-repeat 标签应用大于过滤器。我编写了以下自定义过滤器功能：

$scope.priceRangeFilter = function (location) {
    return location.price >= $scope.minPrice;
};

我在以下 HTML 代码中使用它：

<div ng-repeat="m in map.markers | filter:priceRangeFilter">

更新 $scope.minPrice 时触发 ng-repeat 标签刷新的最佳方法是什么？

Answer 1

它应该是自动的。更改时$scope.minPrice，中继器将自动更新。

function Ctrl($scope,  $timeout) {
    $scope.map = [{
        name: 'map1',
        price: 1
    }, {
        name: 'map2',
        price: 2
    }, {
        name: 'map3',
        price: 3
    }];
    $scope.minPrice = 0;
    $scope.priceRangeFilter = function (location) {
        return location.price >= $scope.minPrice;
    };

    $timeout(function () {
        $scope.minPrice = 1.5;
    }, 2000);
}

Demo on jsFiddle

Answer 2

使用 angularjs 过滤器 API 将过滤器创建为过滤器服务，并添加 minPrice 作为参数。

filter('priceRangeFilter', function ( location ) {
    return function ( location, minPrice ) {
        ...
    }
})

并在模板中

<div ng-repeat="m in map.markers | priceRangeFilter:minPrice">

请参阅此小提琴中的示例：http: //jsfiddle.net/Zmetser/BNNSp/1/