Question

我目前有一个表单，个人可以通过两个输入字段添加名字和姓氏。在某些情况下，他们可能想要添加更多不止一个，所以我想在下面提供按钮/位文本，如果他们点击将创建另一个名字和姓氏输入字段来添加信息。理想情况下，我希望这可以无限重复，他们可以随时添加任意数量但我知道这些有点不切实际，如果我决定让他们能够添加10个名字和姓氏，我会很高兴。我只是想知道我是否可以以角度完成这个，如果是这样，最好的方法是什么？使用目录和ng-repeat或其他东西行呢？我还想要一些文本，只需单击即可删除指定的firstname / lastname输入。

如果可能的话，我会很感激如何实现这一目标（我不要求任何人继续进行编码），更多只是关于如何实现这一目标的指导原则。似乎无法想到在我脑海里做到这一点的最好方法。

感谢。

Answer 1

有可能，

在你的控制器中，为了让事情更有条理，你可以拥有像

这样的东西

var name = function (first, last) {
    this.first = first;
    this.last = last;
}

$scope.names = [new name()]; // start off with one firstname + lastname
$scope.addName = function () {
    $scope.names.push(new name()); // add a blank name
}

和相应的html;

<div ng-repeat="name in names">
    <input type="text" ng-model="name.first" placeholder="firstname"/>
    <input type="text" ng-model="name.last" placeholder="lastname"/>
</div>
<button ng-click="addName()"></button>

Answer 2

嗯，这绝对是可能的，并且可能更容易做无限的而不是特定数量的输入。

对于角度控制器中的javascript代码，我将有一个包含要添加的名称的数组。从和数组开始，然后是一个将添加到该数组的函数：

$scope.namesToAdd=[];
$scope.moreNames=function(){
  namesToAdd.push({first:'',sirname:''});
};

然后对于html代码，它将是这样的：

<input type="text" ng-repeat-start="names in namesToAdd" ng-model="names.first">
<input type="text" ng-repeat-end ng-model="names.sirname">
<button ng-click="moreNames()">Add more names</button>

不断添加新表单输入

2 个答案: