Question

我在Angularjs内置了这个购物清单应用程序，效果很好。我可以添加和删除它的项目。但我的问题是我想允许应用程序使用（event.which = 13）将新项添加到表中，这意味着使用＆＃34;输入＆＃34;键盘上的键。基本上当用户在输入文本字段上并且在键入项目并按下ENTER后我希望将新项目添加到我的表格中。我认为我已接近完成此任务，但通常用户需要这样做：在输入字段中键入文本然后按ENTER然后单击表外的任何位置以添加新项目，但这不会是添加新项目的正确方法。请有人帮忙，让我知道我做错了什么。非常感谢提前。

CodePen：http://codepen.io/HenryGranados/pen/BjWZKP

这是我的代码：

 $("#keypresser").keypress(function(e){
    var codigo = e.which;
    var item   = document.getElementById("keypresser").value;
    if(codigo == 13){

        $scope.addNewItem(item);
        console.log("Hello");
    }

});

Answer 1

使用 ngKeypress

HTML

<input ng-keypress="pressed($event,newItem)" placeholder = "Enter item here..."class="form-control" ng-model="newItem"/>

JS

  $scope.pressed = function($event,item) {
    if ($event.which === 13)
      {$scope.addNewItem(item);
      console.log("hello");}
  }

的 CODEPEN

N：B ：不要在控制器中使用jquery。这不是一个好习惯。

Answer 2

恕我直言，你不必在控制器中使用jquery。这是一种不好的做法。尽管如此，如果你想使用你的代码片段，你必须添加$ scope。$ apply（）来强制摘要周期

$("#keypresser").keypress(function(e){
var codigo = e.which;
var item   = document.getElementById("keypresser").value;
if(codigo == 13){

    $scope.addNewItem(item);
    $scope.$apply();
    console.log("Hello");
}

}）;

主要区别在于此代码强制摘要周期谁有责任使用双向绑定更新模型。

要避免此问题，您可以使用ngKeyPress

我希望有帮助

如何使用ENTER（来自键盘的键）在Angularjs表中添加新对象？

2 个答案: