如何观看字符串更改 - 以角度添加退格？

Question

我正在寻找解决方法来捕捉用户在 Android 上按下退格键（又名键类型 32）。它在 chrome 中运行良好，但在设备上运行良好。

我的尝试之一是使用简单的watch。

但是$watch 没有捕捉到按下的退格键。

这是我到目前为止所做的：

<div class='form-group'>
   <label>Field 1</label>
  <input type='text' ng-model='f1' required class="form-control">
 </div>

<div ng-repeat="line in lines">
   {{line}}
</div>

和：

  $scope.lines = [];

  $scope.$watch(function () {
    return $scope.f1;
},
function (newValue, oldValue) {
    $scope.lines.push(newValue);
}, true);

这是 Plunker

中的演示

[编辑]

我试过ng-change - 得到相同的结果。当我按退格键时没有任何反应

使用 ng-change 演示 Plunker

请帮忙，

Answer 1

它有助于检查您的控制台是否有错误。基本上问题不在于退格，而是ng-repeat 试图重复条目。因此，当您按下退格键时，数组会尝试推送完全相同的项目。

改为使用带有所需文本的对象：

$scope.lines.push({ text: newValue });

另外，使用ng-change 代替$watch。它适用于这个确切的用例。

这是一个有效的 plunk：http://plnkr.co/edit/pMyvHXDEaCSmvyM8N5GH?p=preview

---

看起来 fessy 实际上想要保留默认情况下以角度修剪的尾随空格。那样的话，看ng-trim：https://docs.angularjs.org/api/ng/input/input%5Btext%5D

基本上在输入声明中设置ng-trim="false" 将禁用自动修剪。

Answer 2

正如@Matt 所指出的，这是因为数组中存在重复。角度重复通过唯一的 id 跟踪 ng-repeat。如果未指定，这将被视为与本例行一样的重复值，如果存在重复，则该值将被拒绝。 但是 ng-repeat 提供了重复选项，您可以选择通过一些独特的参数提供跟踪。对于您的情况，只需将 ng-repeat 替换为

ng-repeat="line in lines track by $index"

让我知道这是否有效。

我猜上面的逻辑可以正常工作。 PLUNKER