Question

我正在使用angularjs构建一个Web应用程序，并希望拥有一个动态表单。我有一个表单控件，允许您选择数字1-10，我希望当您选择一个数字时，下面显示的新输入字段数量。

我正在将它用于锻炼应用程序，所以让我们说这个选项适用于“代表”。用户选择5，现在5个输入字段显示在下面，他们可以输入他们完成的5个代表中的每一个的信息。

我该怎么做？

Answer 1

出于迭代目的，角度为ng-repeat指令。

要将ng-repeat与范围一起使用，而不是使用可迭代的集合，您可以创建自己的过滤器（结帐this answer）。

使用该过滤器，您只需在控制器范围上创建“reps”选项，然后像下一个一样编写smth： <input ng-repeat="n in [] | range:reps" type="text" name="firstname">

Answer 2

var i;
var inputFields;
formcontroll =inputfields; //i dont know what you used for form controll the number returned
for (i=0; i<inputfields; i++) {
   $('i dont know where you want to put it').append('i dont know what you want to attach');
};

可能有更好的方法使用即时的角度

Answer 3

这有效：

var myAppModule = angular.module('ngApp', []);
myAppModule.controller('ngController', function($scope) {
  $scope.reps = [];
  $scope.addReps = function(n) {
    for (var i=0; i<n; i++) {
      $scope.reps.push(i);
      console.log($scope.reps);
    }    
  }
});

然后使用以下html：

<div ng-app="ngApp">
  <div ng-controller="ngController">

    <button ng-click="addReps(1)">1</button>
    <button ng-click="addReps(2)">2</button>
    <button ng-click="addReps(3)">3</button>
    <button ng-click="addReps(4)">4</button>
    <button ng-click="addReps(5)">5</button>

    <br>

    <div ng-repeat="n in reps">
        <input type="text" name="reps-{{n}}" />
    </div>

  </div>
</div>

继承工作笔：http://codepen.io/ezy/pen/ojeKaX

根据选择打印多个输入字段

3 个答案: