Как динамически добавить новый вход, если другие заполнены Угловой

Question

Я три входа:

<input type="text" class="form-control" id="friend-email-input" placeholder="Email" /> 
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" /> 
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" /> 

Как добавить новый вход, если эти три входа ADN предыдущий заполнены? Я использую угловой маршрут, и я бы скорее использовал Angular.

Спасибо.

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app> 
 
    <input type="text" class="form-control" ng-model="field1" placeholder="Email" /> 
 
    <input type="text" class="form-control" ng-model="field2" placeholder="Email" /> 
 
    <input type="text" class="form-control" ng-model="field3" placeholder="Email" /> 
 
    <input ng-show="field1.length && field2.length && field3.length" type="text" class="form-control" ng-model="field4" placeholder="Email" /> 
 
</div>

Присвоить каждый вход модели, а затем использовать нг-шоу, чтобы отображать только 4-й вход, если длина моделей truthy (т.е. отличен от нуля).

Answer 2

в контроллере следить за всеми входами, что вам нужно, начиная с

$scope.inputs = [{value: ""}, {value: ""}, {value: ""}]; 

в шаблоне вы собираетесь итерацию по этому массиву, чтобы показать входы yoou имеют

<div ng-app="main" ng-controller="MainController"> 
    <div ng-repeat="input in inputs track by $index"> 
    <input type="text" class="form-control" placeholder="Email" ng-model="input.value"/> 
    <button ng-click="remove($index)">Remove</button> 
    </div> 
    <button ng-click="addInput()">Add Input</button> 
</div> 

Поэтому, когда нажата кнопка удаления входа, этот вход удаляется, если присутствует более трех входов

Если нажать кнопку ввода ввода, мы добавим вход текст с помощью кнопки Удалить

$scope.remove = function(index){ 
    if($scope.inputs.length > 3){ 
    $scope.inputs.splice(index, 1); 
    } 
} 

$scope.addInput = function(){ 
    $scope.inputs.push({value: ""}) 
} 

вот пример codepen