On click insert another template
我有一个带有表单的HTML页面,以及许多输入字段和轮播。表单的底部是一个
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <form name="myForm"> <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}}" /> <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="" /> <button class="add-another" ng-click="addAnother()">Add another quote</button> </form> |
我想要实现的是在单击
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <form name="myForm"> // First 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}}" /> <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="" /> <button class="add-another" ng-click="addAnother()">Add another quote</button> // Second 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}}" /> <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="" /> <button class="add-another" ng-click="addAnother()">Add another quote</button> // Third quote //////////////// // Fourth quote //////////////// // Fifth quote //////////////// </form> |
这是一个使用pl车手的快速尝试:http://plnkr.co/edit/bl1BMkLbeT2tr907lJYK?p=preview
请注意,"添加其他引号"按钮不起作用,请单击顶部的"添加新引号"以插入新行
我真的很想在添加/删除行时使用jQuery隐藏/显示动画。
尽管有很多错误!
好的...花了我一点时间,但我开发了一个可行的例子。这使用了tinycarousel,但是如果您打算用书来做事,您可能应该尝试找到一个angular滑块(我不是)。
这里有很多绒毛和幻想,但是基本思想是制作一个数组,以便可以将ng-repeat链接到它。单击触发器按钮只需将一个递增的数字推到数组上,然后...瞧,angular负责其余部分,自动复制您所引用表单的整个部分。
尝试"全页"以查看效果更好:
1 2 3 4 5 6 | $('.sliders').tinycarousel(); window.refresh = function (index) { $('.sliders').tinycarousel(); $('html, body').animate({ scrollTop: $(document).height() }, 'slow'); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <script type="text/javascript" async="" src="http://baijs.com/tinycarousel/js/jquery.tinycarousel.js"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 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); } }); <form name="myForm"> <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 /> < <ul class="overview" style="width: 1820px; left: -260px;"> <li> <img src="http://www.bobbyberkhome.com/photos/product/giant/103280S21774/alt/21774.jpg" alt="" /> </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> > <button type="button" class="refresh" onclick="refresh()" style="display:none"></button> <button type="button" class="add-another" ng-click="addAnother()">Add another quote</button> </form> |