单击加号，重复该部分

On Click of plus repeat the section

本文关键字：该部 单击      更新时间：2023-09-26

我有一个输入个人详细信息的应用程序，管理员一次可以输入10个人的详细信息，初始屏幕将有一个人的详细内容，单击加号后，应显示字段以输入第二个人的详细信息，再次填充加号以输入第三个人的详细资料。

你能建议任何角度或jquery代码来做这件事吗？

带角度：

<div ng-app="app" ng-controller="MainController">
    <ul>
        <li ng-repeat="person in people">
            <input ng-model="person.name"/>
        </li>
    </ul>
    <button ng-click="new_person()">+</button>
</div>

JS代码：

var app = angular.module('app', []);
app.controller('MainController', function($scope) {
    $scope.people = [
        {name:''}
    ];
    $scope.new_person = function() {
        $scope.people.push({name:''});
    };
});

您可以在li标签中添加此人的更多详细信息。

JSFIDDLE

您可以做如下简单的事情：

$('#cloneBtn').click(function(){
    var miniMe = $('.clone:eq(0)').clone(); // clone the first section
    miniMe.find('input','select','radio','textarea').val(''); //clear the cloned sections contents
     $('#cloneWrapper').append( miniMe ); // add the clone to the dom
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cloneBtn" type="button" value="Add new section" />
<form>
  <div id="cloneWrapper">
  <div class="clone">
    First name:
    <input type="text" name="first_name" />
    <br>Last name:
    <input type="text" name="last_name" />
  </div>
  </div>
</form>

相关文章：