angularjs – 角度形式:在用户点击动态添加表单字段

前端之家收集整理的这篇文章主要介绍了angularjs – 角度形式:在用户点击动态添加表单字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在表单中添加功能,以便用户可以通过单击“添加添加更多的输入字段.这使用角形正式库.

这是一个精确功能的例子,但只使用angularjs.

Adding form fields dynamically

见这 Plunker

这是您需要的一个例子.正如你可以在plunker中看到的,有一个TextArea可以在按钮点击动态创建.创建的TextAreas也可以通过删除按钮单击来删除.

请参阅下面的HTML

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

JS将如下

  1. var app = angular.module('myApp',[]);
  2. app.controller('inspectionController',function($scope,$http) {
  3. $scope.choiceSet = {
  4. choices: []
  5. };
  6. $scope.quest = {};
  7. $scope.choiceSet.choices = [];
  8. $scope.addNewChoice = function() {
  9. $scope.choiceSet.choices.push('');
  10. };
  11. $scope.removeChoice = function(z) {
  12. $scope.choiceSet.choices.splice(z,1);
  13. };
  14. });

猜你在找的Angularjs相关文章