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/

Angularjs：大于过滤ng-repeat

2 个答案: