如果其他输入已填充，如何动态添加新输入 角度

How to dynamically add a new input if other are filled Angular

本文关键字：输入 动态 添加 新输入 角度 何动态 其他 填充 如果      更新时间：2023-09-26

我有三个输入：

<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" />

如果这三个输入和以前的输入被填充，如何添加新输入？我正在使用角度路线，我宁愿使用角度。

谢谢。

<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>

为每个输入分配一个模型，然后使用 ng-show 仅在模型长度为真(即：非零(时显示第 4 个输入。

控制器中的
跟踪

所需的所有输入，从 

$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>

因此，当单击输入的删除按钮时，如果存在超过 3 个输入，则该输入将被删除

如果按下添加输入按钮，我们将附加带有删除按钮的输入文本

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

下面是一个示例代码笔

相关文章：