如何在角度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'two'现在，我不知道我是如何删除它的）

Answer 1

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

您可以通过在控制器中声明的数组上循环另一个ng-repeat来实现此目的。 例如：

在你看来：

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

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

// To add:
$scope.textFields.push({ str: someVariable, value: someValue });

// To remove:
var index = $scope.textFields.map(function(t) { return t.value; }).indexOf(someValue);
if (index !== -1) {
  $scope.textFields.splice(index, 1);
}

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>