我们可以在customfilter中访问用户输入值吗？尝试从控制器或直接在customfilter中访问用户输入编号答案

【问题标题】：Can we access user input value in customfilter.Trying to access user input number from controller or directly in customfilter我们可以在customfilter中访问用户输入值吗？尝试从控制器或直接在customfilter中访问用户输入编号
【发布时间】：2015-04-21 16:46:12
【问题描述】：

我是 Angular js 的新手。在这里我试图通过从 currentTemp 变量中减去用户输入（x）来根据温度过滤数据。但不确定我是否可以访问自定义过滤器中的用户输入值。我我计划稍后在日期使用相同的东西。现在这可能就足够了。请提供有关使用客户文件管理器执行此操作的可能性的反馈（使用输入值并在自定义过滤器中减去它）。任何其他逻辑也将非常有帮助。

http://plnkr.co/edit/Qzne7wfnSa2keRcvbUUV?p=preview

var app = angular.module('tempfilter', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.sensordata = [{name:'Rob',"Date": "2014-02-16T00:00:00.000Z","Temp":42},
  {name:'Bob',"Date": "2012-02-16T20:27:11.507Z","Temp":50},
  {name:'Tom',
  "Date": "2012-02-16T20:27:11.507Z","Temp":60},
  {name:'Sinclair',"Date": "2012-02-16T20:27:11.507Z","Temp":65}];
  $scope.condEqual=function(){
  
  var x = document.getElementById("myNumber").value;
  document.getElementById("demo").innerHTML = x;
  }
  
});

app.filter('tempo', function() {
    return function( items, field ) {
	

      var filtered = [];
	  var x=2;
	     var currentTemp=62;
	       
      angular.forEach(items, function(item) {
        if (item[field]<= currentTemp){
          filtered.push(item);
        }
      });
      return filtered;
    };
});

<!DOCTYPE html>
<html ng-app="tempfilter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>DateFilter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="script.js"></script>
	
</head>
  
  <body ng-controller="MainCtrl">
  <input type="number" id="myNumber" value="2">
<button ng-click="condEqual()">Enter</button> </br>
<p id="demo"></p>
   Filtered list:
	<ul>
      <li ng-repeat="s in sensordata | tempo:'Temp'">{{s.Date|date:'MM/dd/yyyy'}}
      {{s.name}}
	  {{s.Temp}}

    </li>
    </ul>
	
	Full List:
	<ul>
      <li ng-repeat="s in sensordata ">{{s.Date|date:'MM/dd/yyyy'}}
      {{s.name}}
	  {{s.Temp}}

    </li>
    </ul>
  </body>

</html>

（我在这里要做的主要事情是根据日期过滤数据，即基于用户输入，即如果用户输入某个值 eg3 我应该能够从当前日期中减去该值并显示所有数据 3从现在开始的几天。即用户输入 3 和今天的日期 2/19/2015..我将过滤过去三天的所有数据）。现在尝试使用温度将在以后的日期使用相同的逻辑

【问题讨论】：

只需使用ng-model 将相同的对象属性作为参数传递给您的过滤器。此外，在 Angular 中，带有 document.getElementById 的一行代码味道很重，你不应该在指令之外摆弄 DOM。

标签： javascript angularjs angularjs-scope angularjs-controller angularjs-filter

【解决方案1】：

代替：

var x = document.getElementById("myNumber").value;

你应该这样做：

$scope.filter = { value: 2 };

而不是：

document.getElementById("demo").innerHTML = x;

你应该这样做（在 HTML 中）：

<input type="number" id="myNumber" ng-model="filter.value">

<p id="demo">{{ filter.value }}</p>

您不需要按钮或condEqual 函数，Angular 双向数据绑定将实时更新所有内容。

最后一点，只需将filter.value 作为参数传递给您的过滤器。

app.filter('tempo', function() {
    return function(items, field, value) {
        var filtered = [];
        angular.forEach(items, function(item) {
            if (item[field] <= value){
                filtered.push(item);
            }
        });
        return filtered;
    };
});

还有：

<li ng-repeat="s in sensordata | tempo:'Temp':filter.value">

【讨论】：

非常感谢在自定义过滤器参数中传递 filter.value 的最后一部分感到困惑？.. Angular 新手并不容易。
没问题，欢迎使用stackoverflow。查看此更新的plunker - 它位于ng-repeat 内部，您可以使用另一个: 将第二个值传递给过滤器，如下所示：tempo:'Temp':filter.value。还要注意采用第三个参数的函数：function(items, field, value)。
你试过plunker，它是否如你所愿？
非常感谢您的帮助，这真是太好了。几天来一直想弄清楚这件事。现在我需要弄清楚如何对日期做同样的事情。我需要过滤数据对于小于主要目的的用户值的所有日期，尝试使用温度来检查逻辑。明天将尝试弄清楚..从现在开始将使用stackoverflow进行查询..：D
是的，采摘器按预期工作，我想减去用户输入的值。这样我就可以使用与日期相同的功能来根据用户输入过滤数据，就像温度一样。但你已经给出了主要逻辑，我只是减去了值。plnkr.co/edit/Qzne7wfnSa2keRcvbUUV?p=preview

【解决方案2】：

将您的输入与模型绑定，然后您可以直接在自定义过滤器中传递该模型，如下所示

<ul>
   <li ng-repeat="s in sensordata | tempo:'Temp':myNumber">{{s.Date|date:'MM/dd/yyyy'}}
      {{s.name}}
      {{s.Temp}}
   </li>
</ul>

如果你想为你的输入设置默认值，那么你可以在你的控制器中初始化你的模型为$scope.myNumber=62

或

您可以在控制器中定义一个函数并将该函数用作过滤器，如下所示：

<ul>
      <li ng-repeat="s in sensordata | filter:filterByTempo('Temp',myNumber)">{{s.Date|date:'MM/dd/yyyy'}}
      {{s.name}}
      {{s.Temp}}

    </li>
    </ul>

过滤功能

$scope.filterByTempo = function(field,tempo) {
    return function(item) {
      if (item[field]<= tempo){
        return true;
      }
      return false;
    }
  }

更新 Plunker（使用 Angular 自定义过滤器）

更新Plunker（使用过滤功能）

【讨论】：

非常感谢它也有效...正在寻找与日期相同的东西...用户输入值，我可以减去今天的天数 - 用户输入天数并获得所需的数据...。 ..我必须减去这个值才能实现这一点......你给出的逻辑是可行的............var filters = []; var x=60-节奏； angular.forEach(items, function(item) { if (item[field]