加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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);
  };
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读