2013-07-31 5 views
6

Ich verwende einen Größer-als-Filter auf ein ng-repeat-Tag. Ich schrieb die folgende benutzerdefinierte Filterfunktion:Angularjs: größer als Filter mit ng-repeat

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

und ich benutze es in dem folgenden HTML-Code:

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

Was ist der beste Weg, um eine Aktualisierung des ng-Repeat-Tages, wenn $ scope auslösen .minPrice wird aktualisiert?

+0

Es nicht automatisch aktualisieren, wie durch Sza erwähnt, machte ich einen Fehler in minprice in Form verbindlich. Entschuldigen Sie. – Julien

Antwort

10

Es automatisch sein sollte. Wenn $scope.minPrice geändert wird, wird der Repeater automatisch aktualisiert.

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

7

Erstellen Sie den Filter als Filterdienst mit dem angularjs-Filter api, und fügen Sie minPrice als Parameter hinzu.

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

und in der Vorlage

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

Sehen Sie ein Beispiel in dieser Geige: http://jsfiddle.net/Zmetser/BNNSp/1/

+0

Ich würde nur einen registrierten Filter nur erstellen, wenn es tatsächlich wiederverwendbar ist oder ich filtere den gleichen Entitätstyp in mehreren Bereichen, die die Filterfunktion nicht teilen können –

+0

Sie können eine Nadel an die Objekteigenschaft übergeben, die Sie vergleichen zu, und Sie haben einen wiederverwendbaren GT-Filter für Array of Objects. Auf diese Weise wird Ihr Controller leichter. Aber du hast auch Recht. – Oliver