사용자 정의 필터 함수에 두 개의 입력 값을 추가하는 방법

"사이"를 제외한 모든 연산자가 작동하는 비교 연산자에 대한 필터 함수가 있습니다. 저는 두 숫자 사이에 두 개의 입력 필드가 필요하다는 것을 알고 있습니다. 나머지 연산자의 경우 입력 필드 하나만 사용하고 있습니다.사용자 정의 필터 함수에 두 개의 입력 값을 추가하는 방법

사용자 정의 필터 기능에 두 번째 입력 필드를 추가하려면 어떻게합니까? 여기 내 코드는 다음과 같습니다.

app.filter('priceGreaterThan', function() { 
    return function (input, params) { 
     var output = []; 
     if (isNaN(params.price)) { 
      output = input; 
     } 
     else { 
      angular.forEach(input, function (item) { 
       if (params.operator === "gt") { 
        if (item.redemptions > params.price) { 
         output.push(item); 
        } 
       } 
       else if (params.operator === "lt") { 
        if (item.redemptions < params.price) { 
         output.push(item); 
        } 
       } 
       else if (params.operator === "gt-elt") { 
        if (item.redemptions >= params.price) { 
         output.push(item); 
        } 
       } 
       else if (params.operator === "lt-elt") { 
        if (item.redemptions <= params.price) { 
         output.push(item); 
        } 
       } 
       else if (params.operator === "nt-elt") { 
        if (item.redemptions != params.price) { 
         output.push(item); 
        } 
       } 
       else if (params.operator === "btwn") { 
        if (item.redemptions >= params.price && item.redemptions <= params.price) { 
         output.push(item); 
        } 
       } 
       else { 
        if (item.redemptions == params.price) { 
         output.push(item); 
        } 
       } 
      }); 
     } 
     return output; 
    } 
});

출처

2017-09-20 KK SK

입력은 입력 컨트롤 일 필요는 없습니다.

the filtering repeaters 문서를 참조하십시오.

필터가 $ ctrl.query에 바인딩되어 있습니다.

<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">

필터는 자체 제어가 아닌 범위의 개체에 바인딩됩니다.

<!DOCTYPE html> 
<html ng-app="testapp"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="test"> 

    <div> 
    value1: 
    <input ng-model="value1" /> 
    </div> 
    <div> 
     Operator: 
     <select ng-model="operator" ng-options="option.item as option.value for option in options" > 

     </select> 
    </div> 
    <div ng-if="operator==='btwn'"> 
    value2: 
    <input ng-model="value2" /> 
    </div> 
    <div> 
     <h4>As list</h4> 
    {{ inputs | priceGreaterThan: {operator: operator, price: value1, price2: value2 } }} 
    </div> 
    <div> 
     <h4>As params</h4> 
     <ul> 
     <li ng-repeat="input in inputs | priceGreaterThan: {operator: operator, price: value1, price2: value2}">{{input}}</li> 
     </ul> 
    </div> 
    <div> 
     <h4>As 3rd params</h4> 
     <ul> 
     <li ng-repeat="input in inputs | priceGreaterThan2: {operator: operator, price: value1}:value2">{{input}}</li> 
     </ul> 
    </div> 
    <script> 
     var app = angular.module("testapp",[]); 
     app.controller("test", ['$scope',function($scope){ 
     $scope.value1 = 5; 
     $scope.value2 = 15; 
     $scope.inputs = [20,4,15,60,17,6,10,13]; 
     $scope.operator = 'gt'; 
     $scope.options = [ 
      {item: 'gt', value: 'Greater Than'}, 
      {item: 'lt', value: 'Less Than'}, 
      {item: 'gt-elt', value: 'Greater Than or Equal'}, 
      {item: 'lt-elt', value: 'Less Than or Equal'}, 
      {item: 'btwn', value: 'Between'} 
      ]; 
     $scope.out = ''; 
     }]); 
     app.filter('priceGreaterThan2', function() { 
     return function (input, params, otherPrice) { 
      var output = []; 
      if (isNaN(params.price)) { 
       output = input; 
      } 
      else { 
       angular.forEach(input, function (item) { 
        if (params.operator === "gt") { 
         if (item > params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "lt") { 
         if (item < params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "gt-elt") { 
         if (item >= params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "lt-elt") { 
         if (item <= params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "nt-elt") { 
         if (item != params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "btwn") { 
         if (item >= params.price && item <= otherPrice) { 
          output.push(item); 
         } 
        } 
        else { 
         if (item == params.price) { 
          output.push(item); 
         } 
        } 
       }); 
      } 
      return output; 
     } 
     }); 
     app.filter('priceGreaterThan', function() { 
     return function (input, params) { 
      var output = []; 
      if (isNaN(params.price)) { 
       output = input; 
      } 
      else { 
       angular.forEach(input, function (item) { 
        if (params.operator === "gt") { 
         if (item > params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "lt") { 
         if (item < params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "gt-elt") { 
         if (item >= params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "lt-elt") { 
         if (item <= params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "nt-elt") { 
         if (item != params.price) { 
          output.push(item); 
         } 
        } 
        else if (params.operator === "btwn") { 
         if (item >= params.price && item <= params.price2) { 
          output.push(item); 
         } 
        } 
        else { 
         if (item == params.price) { 
          output.push(item); 
         } 
        } 
       }); 
      } 
      return output; 
     } 
    }); 
    </script> 
    </body> 

</html>

Plunker

에 시도

출처

2017-09-20 09:13:36

사용자 정의 필터 함수에 두 개의 입력 값을 추가하는 방법

답변

관련 문제