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

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

这是一个精确功能的例子,但只使用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);
  };
});

猜你在找的Angularjs相关文章