javascript – 我们可以在customfilter中访问用户输入值.从控制器或直接在customfilter中访问用户输入数字

2019年8月5日 180次阅读

我是角度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日..我将过滤最近三天的所有数据.)现在尝试使用温度将使用相同的逻辑日期以后的日期

最佳答案 代替：

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