javascript - 炸药输入添加 Angular.js

Question

我想创建具有多行输入的动态表单，以便当焦点最后时它会自动添加新行。我不确定完成此操作的最佳方法是什么，我用我的解决方案创建了 Punker，当我检测到焦点位于输入元素时，我基本上将空项目附加到模型数组中。

在 html 中我有:

<input enter="main.addButton()" type="text" class="form-control">

我的输入指令:

function enter() {
 return {
    restrict: 'A',
    link: function  (scope, element, attrs) {
        element.bind('focus', function () {
            scope.$apply(attrs.enter);
        })
    }
}

在 Controller 中只需附加到模型:

vm.addButton = function () {
  vm.values.push({name: '', points: null});
};

如何仅在焦点位于最后一个元素时追加？有没有更好的方法来做到这一点？理想情况下，我希望有一个指令，可以将其放在输入组上并复制它们。

这是我的完整示例代码: http://plnkr.co/edit/0vmgdk8LbfU0j6G6A2Xy?p=preview

Answer 1

您可以使用$last，例如:

enter="$last && main.addButton()"

您还可以使用ngFocus而不是输入:

Specify custom behavior on focus event.

只需将您的 enter 属性替换为 ng-focus 即可，例如:

ng-focus="$last && main.addButton()"