Question

我有一个比较运算符的过滤功能除了“之间”之外，一切正常。我知道在两个数字之间我需要两个输入字段，对于其余的操作符我只使用一个输入字段。

如何在自定义过滤器功能中添加第二个输入字段？这是我的代码：

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;
    }
});

Answer 1

请注意，输入不需要是输入控件。

请参阅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="angular.js@1.6.5" 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

上试用

如何在自定义过滤器功能中添加两个输入值

1 个答案: