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

如果前三个输入被填充，如何添加新输入？我正在使用角度路线，我宁愿使用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>

为每个输入分配一个模型，然后使用ng-show仅显示第四个输入，如果模型的长度是真实的（即：非零）。

Answer 2

控制器中的

从

开始跟踪所需的所有输入

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

在模板中

，您将在此数组上进行迭代，以显示您拥有的输入

<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: ""})
}

这是一个示例codepen

如果其他填充Angular，如何动态添加新输入

2 个答案: