如何在自定义过滤器功能中添加两个输入值
[英]How to add two input values in custom filter function
问题描述
I have a filter function for comparison operators everything is working except "between". 
我有一个用于比较运算符的过滤器功能，除了“之间”之外，其他所有功能都在工作。 I know that for between two numbers I need two input fields, for the rest of the operators I am using one input fields only. 我知道对于两个数字，我需要两个输入字段，对于其余运算符，我仅使用一个输入字段。
How can I add the second input field in my custom filter function? 如何在自定义过滤器函数中添加第二个输入字段？ Here is my code: 这是我的代码：
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;
}
});
1 个解决方案
解决方案1
0 2017-09-20 09:13:36
Please noted that Input does not need to be an input control. 请注意，Input不必是输入控件。
Please refer to the filtering repeaters documentation. 请参考过滤转发器文档。
Notice that the filter is binding to $ctrl.query. 注意，过滤器绑定到$ ctrl.query。
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
The filter is binding to an object on the scope not to the control it's self. 筛选器绑定到作用域上的对象，而不绑定到其自身的控件。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将输入值作为参数传递给Angularjs中的自定义过滤器 - How to pass input values as arguments into the custom filter in Angularjs
如何添加两个输入时间值并将其显示在另一个输入框中？ - How to add two input time values and display it in another input box?
使用 NgTable 从输入中添加新的自定义过滤器 - Add new custom filter from input with NgTable
如何添加输入值 - How to add input values
如何使用函数的自定义输入在元素上添加 onclick 事件 - How to add a onclick event on an element with custom input for the function
如何在 update* 函数中为自定义 Shiny Input 添加 HTML 依赖项 - How to add HTML dependencies in an update* function for custom Shiny Input
Google电子表格自定义函数输入值 - Google spreadsheet custom function input values
自定义 function 不从输入中读取值 - Custom function does not read values from input
使用两个输入字段将功能添加到.keyup（） - Add function to .keyup() with two input fields
如何过滤两个类别的搜索输入？ - How to filter search input for two categories?
相关标签