我将如何在表单中添加功能,以便用户可以通过单击“添加”来添加更多输入字段。这使用了角度正式库。
这是确切功能的示例,但仅使用angularjs完成。
动态添加表单字段
这是您需要的示例。正如您在插件中看到的那样,TextArea可以通过单击按钮动态创建一个。单击按钮TextAreas也可以删除创建的内容remove。
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); }; });