表单使用列表和AngularJS输入键操作

Question

在我的AngularJS项目中，我有一个帐户详细信息页面，您可以在其中更改您的个人帐户信息。此页面允许提供多个电话号码和电子邮件地址。使用鼠标输入（或按键到按钮并用空格键按下它们）可以很好地工作，但是我想添加输入键的便利性，按下“逻辑”键。的按钮。

我的表单看起来像（意外忘记翻译一些项目）：

可以在PasteBin找到表单HTML的简化版本，我主要删除了管理列表的指令。

所有按钮均为<button>元素，但取消按钮除外，<a>到上一页，提交按钮为<button type="submit">。

选择任何文本框并按Enter键时，第一个（未禁用的）<button>元素将被点击＆＃39;。这意味着如果我要更改姓氏，请按Enter键，将删除第一个电话号码。

当您进入新的电话号码或电子邮件地址（带绿色+按钮的行）时，应该点击该按钮，如果它被禁用则不执行任何操作。 当您在表单上的任何其他文本框中时，它应该点击保存按钮，如果保存按钮被禁用，则不执行任何操作。

将根据表单验证禁用这两个按钮。

如果有帮助，可以将按钮的类型从按钮更改为提交。

我最好有一个全HTML解决方案，只使用语义，但我怀疑这是否真的有可能。因此，合理的替代方案是使用AngularJS 指令。

请不要提供依赖于ID或类似内容的jQuery或纯JavaScript解决方案。我不想破解AngularJS，而是接受它。

Answer 1

与此同时，我制定了一项指令，允许我声明我称之为“提交范围”的内容。

本质上，您有动作（输入）和目标（按钮），它们通过您可以在模板中指定的键通过服务进行绑定。为了避免密钥冲突和简单烦人的工作，你可以创建一个提交范围，这将导致它的孩子在他们访问的值前面添加一个唯一的密钥。

在提交范围内，您仍然可以通过设置属性global-submit="true"覆盖使用全局密钥的操作。

示例代码：

<div submit-scope>
     <input type="text" submit-action />
     <button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>

You can view the entire source code and a slightly larger example on Plnkr.

Answer 2

我只是想替换

<button>Cancel</button>

带

<input type="button" value="Cancel"> 

它似乎正常工作......