Angularjs: lớn hơn bộ lọc có ng-repeat

Question

Tôi đang áp dụng bộ lọc lớn hơn cho thẻ ng-repeat. Tôi đã viết những chức năng lọc tùy chỉnh sau:

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

và tôi sử dụng nó trong các mã HTML sau:

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

cách tốt nhất để kích hoạt làm mới của thẻ ng-repeat là gì khi $ phạm vi .minPrice được cập nhật?

Answer 1

Nó sẽ được tự động. Khi $scope.minPrice bị thay đổi, bộ lặp sẽ tự động được cập nhật.

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

Tạo bộ lọc dưới dạng dịch vụ bộ lọc bằng cách sử dụng bộ lọc angularjs api và thêm minPrice làm thông số.

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

và trong mẫu

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

Xem ví dụ trong fiddle này: http://jsfiddle.net/Zmetser/BNNSp/1/