Привязать создание динамического элемента к нажатию клавиши с помощью AngularJS

Я пытаюсь добавить элемент в DOM из пользовательского ввода текста с помощью AngularJS. Желаемое поведение:

  • Пользователь вводит строку во входную ng-модель «newTask»
  • Нажимает клавишу ввода
  • Затем динамический элемент добавляется в DOM.

Соответствующий раздел HTML выглядит следующим образом:

<div class="add-task">
  <input type="text" placeholder="Type then press enter to create task" ng-model="newTask" />
</div>

<div class="task-list">
  <a class="task"><span class="text">{{ newTask }}</span></a>
</div>
  • В настоящее время HTML мгновенно обновляется. Как я могу связать это событие, чтобы оно происходило только после нажатия клавиши? Пользовательский интерфейс AngularJS также загружается.

Большое спасибо, новичок в AngularJS


angularjs angular-ui angularjs-model
person Barney    schedule 06.02.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте создать временное значение

HTML:

<input type="text" placeholder="Type then press enter to create task" ng-model="tmpTask" ng-keypress="saveTask($event)" />

Ваш ng-model привязывается к свойству tmpTask. Только когда нажат ввод, сохраните его обратно в newTask

JS:

app.controller('MainCtrl', function($scope) {
  $scope.saveTask = function (event){
    if (event.keyCode == 13){
      $scope.newTask = $scope.tmpTask;
    }
  }
});

ДЕМО

person Khanh TO    schedule 06.02.2014

arrow_upward
1
arrow_downward

HTML

<form ng-submit="createTask()">
    <input type="text" ng-model="newTaskText" />
</form>

<div ng-repeat="task in tasks">{{ task.text }}</div>

контроллер

$scope.tasks = [];

$scope.createTask = function() {
    $scope.tasks.push({
        text: $scope.newTaskText
    });
};
person doodeec    schedule 06.02.2014

arrow_upward
1
arrow_downward

Поскольку один из других ответов касается ng-keypress, я предложу тот факт, что вам не нужно использовать событие ng-keypress, но вместо этого вы можете просто наблюдать за переменной, что сводит на нет необходимость ввода:

http://plnkr.co/edit/osFGRtpHG46bMyp15mc8?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.taskList = [];

 $scope.$watch('newTask', function(newVal){
     if (newVal=="newTask") {
       $scope.taskList.push("Task " + $scope.taskList.length);
       $scope.newTask = null;
     }
 });
});



 <body ng-controller="MainCtrl">
    <div class="add-task">
  <input type="text" placeholder="Type then press enter to create task" ng-model="newTask" />
</div>

{{taskList.length}}
<div class="task-list" >
  <a class="task" ng-repeat="task in taskList" ><span class="text">{{ task }}&nbsp;</span></a>
</div>
  </body>
person lucuma    schedule 06.02.2014
comment
Кажется, это лучший способ достижения цели, но Plunker, на который вы ссылались, похоже, не работает? - person Barney; 06.02.2014
comment
Если вы введете newTask (точно) в текстовое поле, оно сработает. В общем случае $scope.$watch запускается каждый раз при изменении переменной, поэтому вы можете избежать функции при нажатии клавиши. - person lucuma; 06.02.2014