Click another template to click

Question

I have an HTML page with a form and a series of input fields and a carousel. At the bottom of the form is a button until Add another quote . Essentially a copy of the input fields above (total 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> 

What I'm trying to achieve is that when add-another pressed, paste a copy of class = "quote", where {{$ index}} also increases when clicked. The idea is to allow unlimited addition of lines ... Thus, the result will look like this:

 <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> 

Here's a very quick attempt with a plunker: http://plnkr.co/edit/bl1BMkLbeT2tr907lJYK?p=preview

Note that the Add another quote button does not work, click Add new quote at the top to insert new lines

I would really like to use the jQuery hide / show animation when rows are added / removed.

Although with a lot of mistakes!

Answer 1

OK ... took me a little, but I developed a working example. This uses tinycarousel, but you should probably try to find the angular slider if you are doing something from a book (I'm not).

There is a lot of fluff and bizarre stuff here, but the main idea was to create an array so that I could associate ng-repeat with it. By clicking on the start button, it simply pushes the increasing number to the array and ... voila, angular takes care of the rest, automatically duplicating this entire section of the form to which you referred.

Try Full Page for a better view:

 $('.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="#">&lt;</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="#">&gt;</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>