Angularjs：当用户点击进入OnChange事件 [英] Angularjs: Onchange event when the user hits enter

问题描述

我有一个HTML表格中列之一是编辑

I have a HTML table in which one of the column is editable

<td ng-model="my.grade">
   <div contenteditable>
  {{list.grade}}
   </div>
</td>

我有一个角度的功能 getInformation ，做一些计算和连接到后端，然后
使得该表。我的目标是当用户改变上面列的值和命中进入我想更新表，基本上重新运行功能 getInformation 。
我读，我应该 NG-模型和 NG-变化但我要如何更新表中的值的输入？

I have an angular function getInformation which does some calculation and connects to back end and then makes the table. My goal is that when the user changes the value of above column and hits the enter I want to update the table and basically re-run the function getInformation. I read that I should ng-model and ng-change but how should I update the table value on the enter?

推荐答案

您可以做到这一点是这样的：

You can do it like this:

<td ng-model="row.grade" 
    contenteditable ng-keypress='keyPressed($event)'></td>

因此​​， NG-模型和 CONTENTEDITABLE 必须在相同的元素。
此外，如果您指定 NG-模型其内容的元素所有在将通过从模型中值替换。因此，它应该是空的。

So, ng-model and contenteditable must be on the same element. Also, if you specify ng-model on a element, all of its content will be replaced by the value from a model. So it should be empty.

和

$scope.keyPressed = function (e){
    var code = (e.keyCode ? e.keyCode : e.which);

    if(code == 13) { // 'Enter' keycode
      $scope.getInformation(); // your function here or some other code
      e.preventDefault();
    }
}

下面是工作Plunkr：
http://plnkr.co/edit/sHHlqF

Here is working Plunkr: http://plnkr.co/edit/sHHlqF

为什么要使用 CONTENTEDITABLE ？也许你可以只使用＆LT;输入纳克模型...＆GT;

Why do you use contenteditable? Maybe you could use just <input ng-model...>?

这篇关于Angularjs：当用户点击进入OnChange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！