angularjs – 角度形式:在用户点击动态添加表单字段
发布时间:2020-12-17 07:46:38 所属栏目:安全 来源:网络整理
导读:如何在表单中添加功能,以便用户可以通过单击“添加”添加更多的输入字段.这使用角形正式库. 这是一个精确功能的例子,但只使用angularjs. Adding form fields dynamically 见这 Plunker 这是您需要的一个例子.正如你可以在plunker中看到的,有一个TextArea可以
如何在表单中添加功能,以便用户可以通过单击“添加”添加更多的输入字段.这使用角形正式库.
这是一个精确功能的例子,但只使用angularjs. Adding form fields dynamically
见这
Plunker
这是您需要的一个例子.正如你可以在plunker中看到的,有一个TextArea可以在按钮点击动态创建.创建的TextAreas也可以通过删除按钮单击来删除. 请参阅下面的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); }; }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |