カスタムフィルタ関数で2つの入力値を追加する方法

私は比較演算子のフィルタ関数を持っていますが、 "between"以外はすべて動作しています。私は2つの数字の間に2つの入力フィールドが必要であることを知っています。残りの演算子については、入力フィールドを1つだけ使用しています。カスタムフィルタ関数で2つの入力値を追加する方法

カスタムフィルター機能で2番目の入力フィールドを追加するにはどうすればよいですか？ここに私のコードです：

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

カスタムフィルタ関数で2つの入力値を追加する方法

答えて

関連する問題