0

我正在尝试使用 AngularJS 从用户文本输入中将元素附加到 DOM。期望的行为是：

  • 用户在输入 ng-model "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 UI 也被加载。

非常感谢，AngularJS 新手

4

3 回答 3

1

尝试创建一个临时值

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

演示

于 2014-02-06T13:21:13.113 回答
1

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
    });
};
于 2014-02-06T13:21:13.257 回答
1

由于其他答案之一解决了 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>
于 2014-02-06T13:31:58.030 回答