Добавление новых входных форм формы

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>