gpt4 book ai didi

javascript - AngularJS : Function only updates variable in view after an event happens

转载 作者:行者123 更新时间:2023-12-03 04:36:24 26 4
gpt4 key购买 nike

我有一个简单的输入字段:

<input id = 'input' ng-model="addMe">

连接到脚本:

<script>
document.getElementById('input').onkeydown = function(event) {
if (event.keyCode == 13) {
angular.element(document.getElementById('input')).scope().addItem();
}
}
</script>

这样每当用户在输入字段中按下 Enter 时;调用 AngularJS 中的 addItem 函数,将输入字段中的字符串添加到数组中。

    $scope.addItem = function () {
found = false;
if (!$scope.addMe) return $scope.errorText = "Please Specify an Item";
else {
angular.forEach($scope.Products, function(value, key) {
if (value.name.toUpperCase() == $scope.addMe.toUpperCase()){
$scope.cart_items.push({name : value.name, price : value.price});
$scope.grandTotal += value.price;
$scope.addMe = '';
$scope.errorText = '';
found = true;
}
});
if(!found){$scope.errorText = "Item does not exist";}
}
}

请注意,cart_itemsproducts是数组(与问题没有直接关系)

当我按下回车键时,函数addItem被调用,传递正确的变量;但是像 errorTextgrandTotal 这样的变量,以及应该插入数组 cart_items 的数据,仅在我按下另一个时更新键,或单击。

我知道这个函数正在做它应该做的事情;因为我使用 console.log 进行调试。

最佳答案

这里是示例代码,更改文本字段值,按Enter并查看控制台输出。

angular.module('app', []);

angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {

$scope.fieldValue = "Hello";

$scope.keydown = function(event) {
if(event.key === 'Enter') {
$scope.addItem((event.srcElement || event.target).value);
}
}

$scope.addItem = function (value) {
// do something
console.log('Add item with value', value);
}

}]);
<!doctype html>

<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-controller="ExampleController">

<input type="text" ng-model="fieldValue" ng-keydown="keydown($event)">

</body>
</html>

Here is also a plunker与上面的代码

关于javascript - AngularJS : Function only updates variable in view after an event happens,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43274841/

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