具有最小值和最大值的角度過濾器

我在獲取角度以正確過濾我的結果方面遇到了一些麻煩。我試圖使用自定義過濾器從最小輸入和最大輸入獲取參數。具有最小值和最大值的角度過濾器

/index.html

<input ng-model="minHorsepower"> 
<input ng-model="maxHorsepower"> 
... 
tr(ng-repeat="plane in planes | filter:horsepowerFilter")

/controllers.js

//Horsepower filter 
$scope.horsepowerFilter = function(plane) { 
    var ret = true; 

    if($scope.minHorsepower && $scope.minHorsepower > plane.horsepower) { 
    ret = false; 
    } 

    if($scope.maxHorsepower && $scope.maxHorsepower < plane.horsepower) { 
    ret = false; 
    } 

    return ret; 
}; 

$scope.planes = [ 
    { 
     'make' : 'Piper', 
     'model' : 'Arrow', 
     'modelNumber' : 'PA-28R-180', 
     'horsepower' : '180', 
     'gear' : 'retractable', 
    }, 
    { 
     'make' : 'Piper', 
     'model' : 'Arrow', 
     'modelNumber' : 'PA-28R-200', 
     'horsepower' : '200', 
     'gear' : 'retractable', 
    } 
];

它的工作原理最初，當我在controllers.js設置$ scope.minHorsepower/$ scope.maxHorsepower，但只是起初，不是當我把其他東西放在<input>中時。此外，它預先填充輸入並過濾結果。當我改變輸入值時，它不能正常工作。

我引用這個堆棧溢出線程，但我找不到我們的代碼進行任何重大差異... AngularJS multiple filter with custom filter function

感謝您的幫助。

來源

2014-01-13 Andrew Samuelsen

通常，當你提供的jsfiddle或plnkr – allenhwkim

這種問題得到quicky回答我建議你確保使用數字。在你的代碼中，你正在比較字符串，它不會像你期望的那樣工作。例如您可以添加零（'馬力+ 0'）將字符串轉換爲數字。 – Tosh

我做了一個plnkr http://plnkr.co/edit/GnF6IE?p=preview但沒有問題過濾它。你可以發佈你的plnkr嗎？ – Daiwei

不幸的是，我無法準確指出你的代碼存在的問題。但是，我認爲我創建了a plnkr（我相信）按預期工作。

除了使用parseFloat解析輸入外，邏輯似乎是相同的。不解析輸入到數字形式不應該「破壞」它，但可能會使它表現奇怪（例如「9」>「10」）。

無論如何，希望你可以拉出有用的作品，讓它工作。

來源

2014-01-14 02:12:02

要確保模型值是數字而不是字符串，請將輸入的type更改爲number。

<input type="number" ng-model="minHorsepower" /> 
<input type="number" ng-model="maxHorsepower" />

此外，請確保您的模型值是數字而不是字符串。

或者，您可以在您的過濾器中通過parseFloat(...)運行所有操作。

來源

2014-01-14 01:15:30 rtcherry

由於您只向過濾器發送一個函數，因此它不知道是否需要監視任何值更改，從而在發生過濾器函數時觸發它。

當您將過濾器定義爲{{filter_expression | filter：filterValue}}，angular觀察filterValue並在更改時觸發過濾器函數。

爲了達到你所需要的，你可以自己定義過濾器：

angular.module('myApp') 
    .filter('range', function(){ 
    return function(items, property, min, max) { 
     return items.filter(function(item){ 
     return item[property] >= min && item[property] <= max; 
     }); 
    }; 
    });

，並調用它像這樣：

ng-repeat="plane in planes | range : 'horsepower' : minHorsepower : maxHorsepower"

來源

2015-05-05 13:25:06 andrei

具有最小值和最大值的角度過濾器

回答

相關問題