如何在角度js中单击按钮添加和删除文本字段

Question

我在角度js中使用ng-repeat指令生成了按钮。现在，我想在点击该按钮时在 div 标签内生成一个文本字段。

示例按钮 -

单击它时添加了示例文本字段 -

我使用 div 标签的innerHTML属性进行此操作，如下所示 -

var txt = document.getElementById("paidby").innerHTML;
document.getElementById("paidby").innerHTML=txt+ "<div class='row' style='padding:2px'><div class='col-sm-4'><input type='number' placeholder="+str+"></div></div>";

但我想知道是否还有其他更好的方法使用angularJS或javascript来做同样的事情，这样如果我以后需要删除一个或所有文本字段，就可以轻松完成。通过删除手段删除和不隐藏。

（因为我想删除例如textfield＆＃39;现在，我不知道如何删除它）

Answer 1

您不想操纵控制器中的DOM。通常，在Angular提供的框架内有更好的方法可以做到这一点。

您可以通过在控制器中声明的阵列上循环另一个ng-repeat来完成此操作。例如：

在您看来：

if (typeof process !== "undefined" && process.versions['node-webkit']) {
    console.log('You are using node-webkit!');    
}

在您的控制器中，在按钮ng-click逻辑中：

<section id="paidby" ng-repeat="textfield in textfields">
  <div class='row' style='padding:2px'>
    <div class='col-sm-4'>
      <input type='number' placeholder="{{textField.str}}" ng-model="textField.value">
    </div>
  </div>
</section>

Answer 2

尝试隐藏输入以开始，然后在单击相应按钮时显示它们：

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

<div ng-app="" ng-init="array=['one','two','three','four','five']; show=[false,false,false,false,false]">

<button ng-repeat="item in array" ng-click="show[$index] = !show[$index]">{{item}}</button>
<br>
<input type="text" ng-repeat="item in array" placeholder="{{item}}" ng-if="show[$index]" />

</div>