点击加号重复该部分

时间:2015-03-25 08:01:20

标签: javascript jquery angularjs

我有申请输入人的详细信息,管理员可以一次输入10个人的详细信息,初始屏幕将有一个人输入详细信息,点击加号时应显示字段以输入详细信息第二人称再加上应该填写第三人的详细信息。

你可以建议任何角度或jquery代码来做这个吗?

2 个答案:

答案 0 :(得分:-1)

有角度:

<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 tag中添加此人的更多详细信息。

JSFIDDLE

答案 1 :(得分:-1)

你可以做一些简单的事情:

&#13;
&#13;
$('#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
  
  });
&#13;
<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>
&#13;
&#13;
&#13;