Angularjs: Onchange event when the user hits enter

问题

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

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

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?

回答1:

You can do it like this:

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

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.

And

$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();
    }
}

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

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

来源：https://stackoverflow.com/questions/22111411/angularjs-onchange-event-when-the-user-hits-enter

标签

html