我们可以在customfilter中访问用户输入值。可以从控制器或直接在customfilter中访问用户输入编号

Question

我是角度js的新手。这里我试图通过从currentTemp变量中减去用户输入（x）来根据温度过滤数据。但不确定我是否可以访问自定义过滤器中的用户输入值。我正在计划使用同样的事情在以后的日期。现在这可能就足够了。请使用custome文件管理器提供反馈（使用输入值并在自定义过滤器中减去它）。任何其他逻辑也将非常有用。

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>

（我在这里尝试做的主要是基于日期过滤数据，即基于用户输入，即如果用户输入特定值，例如，我应该能够从当前日期减去该值并显示从现在起3天后的所有数据。即用户输入3和今天的日期2015年2月19日..我将过滤最后三天的所有数据。）现在尝试使用温度将使用相同的逻辑日期以后的日期

Answer 1

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

<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 （使用角度自定义过滤器）

更新的Plunker （使用过滤功能）

Answer 2

代替：

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">

我们可以在customfilter中访问用户输入值。可以从控制器或直接在customfilter中访问用户输入编号

问题描述

2 个解决方案

解决方案1
1 2015-02-20 04:41:52

解决方案2
1 已采纳 2015-02-20 04:42:10

我们可以在customfilter中访问用户输入值。可以从控制器或直接在customfilter中访问用户输入编号

问题描述

2 个解决方案

解决方案1 1 2015-02-20 04:41:52

解决方案2 1 已采纳 2015-02-20 04:42:10

解决方案1
1 2015-02-20 04:41:52

解决方案2
1 已采纳 2015-02-20 04:42:10