Question

假设我要添加＆＃39;添加更多＆＃39;输入类型文件字段旁边的按钮。这样点击“添加更多”＆＃39;按钮将创建另一个文件字段。

我可以使用＆＃39; .clone（）＆＃39;对于JQuery中的这个。

但是我如何在AngularJS中做到这一点？

谢谢！

Answer 1

在控制器中：

$scope.addMore = function() {
    $scope.inputs += 1;
};

$scope.range = function(count) {

    var inputs = [];
    for (var i = 0; i < count; i++) { 
        inputs.push(i)
    }
    return inputs;
}

$scope.inputs = 0;

在HTML中：

<input ng-repeat="n in range(inputs)">
<button ng-click="addMore()">Add more!</button>

更有用的版本

通常，您希望获得与输入字段相关的其他信息，因此根据您的使用情况，您可能只想拥有一些具有某些属性的输入对象数组，然后对该数组执行ng-repeat，如下所示：

控制器：

$scope.inputs = [];

$scope.addMore = function() {
    $scope.inputs.push({
        id: $scope.inputs.length,
        text: "Initial text here"
    })
};

HTML：

<input ng-repeat="input in inputs" ng-model="inputs[$index].text">
<button ng-click="addMore()">Add more!</button>

Answer 2

您要做的是创建一个输入按钮数组。

显示您的输入数组：

<div ng-repeat="item in items"><input type="text" ng-model="item.value"><div>

将功能附加到按钮的ng-click：

<button ng-click="addMore()">Add More</button>

然后在控制器中定义您的数组：

$scope.items = [];

$scope.addMore = function () {
          $scope.items.push({ 
            value:'default'
          });

AngularJS为输入类型文件添加更多选项

2 个答案: