gpt4 book ai didi

javascript - 我们可以在自定义过滤器中访问用户输入值吗?尝试从 Controller 或直接在自定义过滤器中访问用户输入号码

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:16:36 24 4
gpt4 key购买 nike

我是 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>

(我在这里尝试做的主要事情是根据日期过滤数据,即根据用户输入,即如果用户输入特定值,例如 3 我应该能够从当前日期中减去该值并显示所有数据 3几天后。即用户输入 3 和今天的日期 2/19/2015..我将过滤过去三天的所有数据)。现在尝试使用温度将对以后的日期使用相同的逻辑

最佳答案

代替:

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 双向数据绑定(bind)将实时更新所有内容。

最后一点,只需将 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">

关于javascript - 我们可以在自定义过滤器中访问用户输入值吗?尝试从 Controller 或直接在自定义过滤器中访问用户输入号码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28621640/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com