AngularJS：功能仅后事件发生

我有一个简单的输入字段更新变量鉴于：AngularJS：功能仅后事件发生

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

即存在这样，无论何时用户按下输入字段; 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_items和products是数组（不直接相关的问题）

当我按下回车，传递正确的变量函数addItem被调用;但像errorText,grandTotal这样的变量，以及应该推入数组的数据只在我按另一个键或点击时更新。

我知道该功能正在做它应该做的事情;因为我用console.log进行调试。

来源

2017-04-07 Kevin fu

可能的问题的代码消化 – Groben

这是一个示例代码，更改文本字段值，请按输入并查看控制台输出。

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

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

 
\t $scope.fieldValue = "Hello"; 
 

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

 
\t $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以上

来源

2017-04-07 10:05:43

@凯文 - 福做到了解决问题了吗？ –

您上面给我的示例代码，每次按Enter键都会返回一个错误。但您在输入元素中使用“ng-keydown”;解决了我的问题。因为我用它作为我自己的js“keydown”函数的替代品。我建议编辑答案，所以我可以接受它作为答案。 –

您的意思是，当您单击*运行代码段*时出现错误？这很奇怪，但我也添加了一个Plunker与相同的代码，如果你不想。试用IE，Chrome和Firefox没有任何问题。只需在Plunker中打开浏览器控制台以显示结果;） –

AngularJS：功能仅后事件发生

回答

相关问题