Question

我有这个问题，我正在寻找各地的例子，我看到的是用ng-repeat添加输入的那些例子，但我不希望这样，我想要的只是一个按钮，表示{ {1}}一旦用户点击它，就会在现有文本下面有一个新的输入文本。

add another input

Answer 1

一个简单的例子：

HTML：

<div ng-controller="MyCtrl">
    <li ng-repeat="item in items">
        <input/>
    </li>
    <button ng-click="add()">Add</button>
</div>

JS：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.items = [1];
    $scope.add=function(){
      $scope.items.push($scope.items.length)
    }

}

示例 fiddle

这是一种方法。我只需向items添加元素，这会增加其长度，从而为其添加一个输入。

Answer 2

如果您的输入列表将无限增长，那么最佳选择确实是ng-repeat，但如果您需要的是另一个预定义的输入，则可以使用ng-if添加标记。
如下所示：

<div ng-if="inputAdded">
    <!-- input and other stuff in here -->
<div>

<button ng-click="inputAdded = true"></button>

Answer 3

这就是你需要的。您可以使用ng-repeat或ng-repeat-start / ng-repeat-end（后者导致更少的html元素，但为了简单起见，我只是在这里使用ng-repeat）：

<div>
  <div ng-repeat="operation in operations">
    <input ng-model="operation.detailText" type="text"></input>
    <div>
      <p>{{operation.detailText}}</p>
    </div>
  </div>
  <button ng-click="operations.push({})">Add one more</button>
</div>

注意：此处的操作是一个数组，启动时可以为空。

如何在没有ng-repeat的情况下动态添加输入

3 个答案: