최소값과 최대 값을 갖는 각도 필터

Question

결과를 제대로 필터링하기 위해 각도가 잘 잡히지 않습니다. 최소 입력 및 최대 입력에서 인수를 가져 오는 사용자 지정 필터를 사용하려고합니다. 난 단지 처음 controllers.js에 $ scope.minHorsepower/$ scope.maxHorsepower를 설정할 수 있지만 때 처음에 작동

/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', 
    } 
]; 

, 내가 <input>에 뭔가 다른 것을 넣지 않을 때. 또한 입력을 미리 채우고 결과를 필터링합니다. 입력 값을 변경할 때 제대로 작동하지 않습니다.

나는이 스택 오버플로 스레드를 참조했지만, 나는 우리의 코드에서 모든 자료의 차이를 찾을 수 있습니다 ... 도움을 AngularJS multiple filter with custom filter function

감사합니다.

Answer 1

불행히도, 나는 당신이 당신의 코드에 어떤 문제가 있는지 정확하게 지적 할 수 없습니다. 그러나, 나는 (내가) 생각한대로 작동한다고 a plnkr을 만들었다 고 생각합니다.

parseFloat를 사용하여 입력을 구문 분석하는 것 외에는 논리가 동일하게 보입니다. 입력 양식을 숫자 형식으로 파싱하지 않아도 "깨뜨리지"말고 이상하게 작동하게 할 수 있습니다 (예 : "9"> "10").

어쨌든 유용한 조각을 꺼내서 작동 시키면 좋을 것입니다.

Answer 2

모델 값이 문자열이 아닌 숫자인지 확인하려면 입력 값이 number이되도록 type을 변경하십시오.

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

또한 모델 값이 숫자가 아닌 문자열인지 확인하십시오.

또는 parseFloat(...)을 통해 필터를 실행할 수 있습니다.

Answer 3

함수에만 필터를 보내면 값 변경을 감시하고 필터 함수가 발생할 때 트리거하는 것을 모릅니다.

필터를 {{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; 
     }); 
    }; 
    }); 

과 같이 호출 :

당신이 당신 자신의 필터를 정의 할 수 있습니다 필요한 달성하기 위해

당신이 jsfiddle 제공하거나