我有一个带有表单和许多输入字段和轮播的HTML页面。在表单的底部是button到添加另一个引用 ..基本上是上面输入字段的副本（class="quote"的整体）。
HTML：
<form name="myForm">
<div class="quote">
<p>Enter the fields below</p>
<input type="text" ng-model="'firstname'+{{$index}}" />
<input type="text" ng-model="'surname'+{{$index}}" />
<input type="text" ng-model="'postcode'+{{$index}}" />
<input type="text" ng-model="'productid'+{{$index}}" />
<input type="text" ng-model="'price'+{{$index}}" />
<div class="carousel">
<img src="/assets/img/chair.jpg" alt="" />
<img src="/assets/img/spoon.jpg" alt="" />
<img src="/assets/img/table.jpg" alt="" />
<img src="/assets/img/tap.jpg" alt="" />
</div>
<button class="add-another" ng-click="addAnother()">Add another quote</button>
</div>
</form>
我想要实现的是点击add-another，插入一个类的副本=＆＃34;引用＆＃34;其中{{$ index}}在点击时也会增加。这个想法是允许无限制地添加行...所以结果将是：
<form name="myForm">
// First quote ////////////////
<div class="quote">
<p>Enter the fields below</p>
<input type="text" ng-model="'firstname'+{{$index}}" />
<input type="text" ng-model="'surname'+{{$index}}" />
<input type="text" ng-model="'postcode'+{{$index}}" />
<input type="text" ng-model="'productid'+{{$index}}" />
<input type="text" ng-model="'price'+{{$index}}" />
<div class="carousel">
<img src="/assets/img/chair.jpg" alt="" />
<img src="/assets/img/spoon.jpg" alt="" />
<img src="/assets/img/table.jpg" alt="" />
<img src="/assets/img/tap.jpg" alt="" />
</div>
<button class="add-another" ng-click="addAnother()">Add another quote</button>
</div>
// Second quote ////////////////
<div class="quote">
<p>Enter the fields below</p>
<input type="text" ng-model="'firstname'+{{$index}}" />
<input type="text" ng-model="'surname'+{{$index}}" />
<input type="text" ng-model="'postcode'+{{$index}}" />
<input type="text" ng-model="'productid'+{{$index}}" />
<input type="text" ng-model="'price'+{{$index}}" />
<div class="carousel">
<img src="/assets/img/chair.jpg" alt="" />
<img src="/assets/img/spoon.jpg" alt="" />
<img src="/assets/img/table.jpg" alt="" />
<img src="/assets/img/tap.jpg" alt="" />
</div>
<button class="add-another" ng-click="addAnother()">Add another quote</button>
</div>
// Third quote ////////////////
// Fourth quote ////////////////
// Fifth quote ////////////////
</form>
这是一个非常快速的尝试与一个plunker：http://plnkr.co/edit/bl1BMkLbeT2tr907lJYK?p=preview
请注意添加其他报价按钮无效，点击顶部的添加新报价以插入新行
我真的想在添加/删除行时使用jQuery hide / show动画。
虽然有很多错误！
答案 0 :(得分：1)
好的......带我一点但我开发了一个有效的例子。这使用了tinycarousel，但如果您正在按照本书的方式做事（或者不是），您应该尝试找一个角度滑块。
这里有很多绒毛和幻想，但基本的想法是制作一个阵列，以便我可以将ng-repeat链接到它。单击触发按钮只需将增加的数字推送到数组，然后......瞧，角度处理其余部分，自动复制您所引用的表单的整个部分。
尝试全页＆＃39;为了更好地观看：
$('.sliders').tinycarousel();
window.refresh = function (index) {
$('.sliders').tinycarousel();
$('html, body').animate({ scrollTop: $(document).height() }, 'slow');
}div.img-hold {
height: 100px;
width: 236px;
text-align: center;
}
img {
height: 75px;
width: auto;
}
#slide-holder {
width: 488px;
}
li:nth-of-type(1) img {
margin-left: -125px;
}
li:nth-child(5) img {
margin-left: -125px;
}
.viewport {
height: 140px !important;
}
li {
border: 0 !important;
}
/* slider1 */
.sliders {
margin: 0 0 20px;
overflow: hidden;
padding: 0 40px;
position: relative;
}
.sliders .viewport {
float: left;
width: 100%;
height: 123px;
overflow: hidden;
position: relative;
}
.sliders .buttons {
background: #C01313;
border-radius: 35px;
display: block;
margin: 30px 0 0;
width: 35px;
height: 35px;
position: absolute;
left: 0;
top: 0;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
}
.sliders .next {
margin: 30px 0 0;
left: auto;
right: 0;
top: 0;
}
.sliders .buttons:hover {
color: #C01313;
background: #fff;
}
.sliders .disable {
visibility: hidden;
}
.sliders .overview {
list-style: none;
position: absolute;
left: 0;
top: 0;
}
.sliders .overview li {
float: left;
margin: 0 20px 0 0;
overflow: hidden;
height: 121px;
border: 1px solid #dcdcdc;
width: 104px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" async="" src="http://baijs.com/tinycarousel/js/jquery.tinycarousel.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.indices = [1];
$scope.index = 1;
$scope.addAnother = function() {
$scope.index++;
$scope.indices.push($scope.index);
}
$scope.refresh = function() {
$('.refresh:first').click();
$('.copy:last').hide();
$('.copy:last').fadeIn(800);
}
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<div class="copy" ng-repeat="i in indices" ng-init="refresh()">
<div class="quote">
<p>Enter the fields below</p>
<input type="text" placeholder="First Name" ng-model="firstname[$index]" />
<br />
<input type="text" placeholder="Last Name" ng-model="surname[$index]" />
<br />
<input type="text" placeholder="Zip Code" ng-model="postcode[$index]" />
<br />
<input type="text" placeholder="Product ID" ng-model="productid[$index]" />
<br />
<input type="text" placeholder="Price" ng-model="price[$index]" />
<br />
<br />
<div id="slide-holder">
<div class="sliders"> <a class="buttons prev" href="#"><</a>
<div class="viewport">
<ul class="overview" style="width: 1820px; left: -260px;">
<li>
<div class="img-hold">
<img src="http://www.bobbyberkhome.com/photos/product/giant/103280S21774/alt/21774.jpg" alt="" />
</div>
</li>
<li>
<img src="http://www.crystalgiftbox.com/wp-content/uploads/2013/05/3651021_Pyramide_Dessert_Spoon.png" alt="" />
</li>
<li>
<img src="http://www.ikea.com/PIAimages/0106117_PE253936_S5.JPG" alt="" />
</li>
<li>
<img src="http://p.globalsources.com/IMAGES/PDT/B1061749397/Beer-Tap.jpg" alt="" />
</li>
</ul>
</div> <a class="buttons next" href="#">></a>
</div>
<button type="button" class="refresh" onclick="refresh()" style="display:none"></button>
</div>
</div>
</div>
<button type="button" class="add-another" ng-click="addAnother()">Add another quote</button>
</form>
</div>
</div>