Как я могу добавить новый объект в таблицу Angularjs, используя ENTER (клавиша с клавиатуры)?

Question

Как я могу добавить новый объект в таблицу Angularjs, используя ENTER (клавиша с клавиатуры)?

0

У меня есть это приложение для списка покупок, построенное в Angularjs, которое отлично работает. Я могу добавлять и удалять элементы из него. Но моя проблема в том, что я хочу, чтобы приложение добавляло новые элементы в таблицу, используя (event.which = 13), что означает использование клавиши "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");
    }

});

HenryDev 06 янв. 2016, в 04:32

Источник

Теги:

javascript

jquery

angularjs

2 ответа

1

IMHO, вам не нужно использовать 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

Надеюсь, это поможет

FedeF 06 янв. 2016, в 00:38

Ещё вопросы

Anik Islam Abhi · Accepted Answer · 2016-01-06T00-23-00.000Z

Использовать 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 в контроллере. это не очень хорошая практика.