Question

我正在为网站开发朋友邀请功能。只有要求是：通过电子邮件，一次最多邀请。

我的想法如下：

一开始，用户只能看到一个电子邮件字段。当他在唯一字段中输入电子邮件地址时，angularjs会对其进行验证（电子邮件格式检查）并创建其他电子邮件字段。

现在，我来自jquery背景，我认为用角度操纵DOM是不好的做法。如何用angularjs做到这一点？

创建一个“生成”（来自模板文件）字段的工厂是不是一个好主意？

像bootstrap ui这样的库可以帮助我编写更简单的代码来进行表单验证和错误管理吗

Answer 1

此Plunker可能会满足您最近的需求：http://plnkr.co/edit/5qRXQ1XGzUnhYjLCiyYR?p=preview

此技术的关键点是让用户直接编辑动态模型列表。实际上，在示例中，$scope.invites包含您的值。这里的诀窍是将它们称为模型：

  <input type="email" class="invite" name="invite{{ $index }}" ng-model="invites[$index].mail" ng-change="checkInvite($index)" />

$index是当前ng-repeat次迭代的索引。 checkInvite功能会负责观察邀请字段中的更改。

注意：

invites是一个对象数组，这样我们就不会弄乱ng-repeat，迭代我们处理的引用（vs将由角度处理）
字段的名称对于手动检查字段的有效性非常有用：在控制器中，我们可以检查字段的有效性，访问 $ scope.formName.fieldName。$ valid < / em>的

我还添加了一个额外的测试，用于检查用户是否清除了非最后填写的字段。在这种情况下，我们删除该字段。

使用angular玩得开心！

Answer 2

就个人而言，我会发现设计令人困惑，因为我不知道我可以拥有更多的电子邮件地址。至少，我希望+向用户表明他/她可以添加更多地址。想想航空公司如何做多个目的地＆＃34;在他们的网站上搜索。

但是，如果设置为此值，请在范围中使用数组。我正在使用一张桌子，但任何事都可以。

<input ng-model="newemailaddress"></input><button ng-click="addEmail">Add</button>
<table>
  <tr ng-repeat="addr in addresses"><td>{{addr}}</td></tr>
</table>

你的控制器就像：

.controller('MyCtrl',function($scope) {
  $scope.addresses = [];;
  $scope.newemailaddress = "";
  $scope.addEmail = function() {
    // do validation
    if (valid) {
      $scope.addresses.push($scope.newemailaddress);
      $scope.newemailaddress = "";
    };
  };
})

Angularjs：创建动态表单

2 个答案: