Angular-Formly：在用户单击时dynamic添加表单域

我将如何去添加表单中的function，以便用户可以通过单击“添加”来添加更多的input字段。 这使用angular度forms库。

这是一个确切的function的例子，但只使用angularjs完成。

dynamic添加表单域

Answer 1

看到这个Plunker

这里是你需要的一个例子。 正如你所看到的那样，有一个TextArea可以在button点击时dynamic地创build。 创build的TextAreas也可以通过单击removebutton来删除。

请参阅下面的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); }; }); 

Answer 2

我把简单的例子。

 var app = angular.module("app",[]); app.controller("MyCtrl" , function($scope){ $scope.data ={ names:[{ name:""}] }; $scope.addRow = function(index){ var name = {name:""}; if($scope.data.names.length <= index+1){ $scope.data.names.splice(index+1,0,name); } }; $scope.deleteRow = function($event,name){ var index = $scope.data.names.indexOf(name); if($event.which == 1) $scope.data.names.splice(index,1); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MyCtrl"> <table> <tr ng-repeat="name in data.names track by $index"> <td> <input type="text" ng-model="data.names[$index].name"></td> <td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td> <td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td> </tr> </table> <span>{{data|json}}</span> </div>