angularjs - Angular-Formly:在用户单击时动态添加表单字段

Question

我将如何在表单中添加功能，以便用户可以通过单击“添加”来添加更多输入字段。这使用了 Angular 正式库。

这是确切功能的示例，但仅使用angularjs完成。

Adding form fields dynamically

Answer 1

看到这个Plunker

这是您所需要的示例。如您在插件中看到的，有一个TextArea，可以在单击按钮时动态创建。也可以通过单击TextAreas按钮删除创建的remove。

请参见下面的 HTML

<div class="col-sm-10">
  <input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
  <div class="col-sm-4">
    <fieldset data-ng-repeat="field in choiceSet.choices track by $index">
      <textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
      <button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
        <span class="glyphicon glyphicon-minus"></span> REMOVE
      </button>
    </fieldset>
  </div>
</div>

并且 JS 将如下所示

var app = angular.module('myApp', []);
app.controller('inspectionController', function($scope, $http) {
  $scope.choiceSet = {
    choices: []
  };
  $scope.quest = {};
  $scope.choiceSet.choices = [];
  $scope.addNewChoice = function() {
    $scope.choiceSet.choices.push('');
  };
  $scope.removeChoice = function(z) {
    $scope.choiceSet.choices.splice(z, 1);
  };
});