On click insert another template

Question

I have a HTML page with a form and a number of input fields and carousel. At the bottom of the form is a button to Add another quote.. Essentially a copy of the input fields above (the entirety of 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 am trying to achieve is that on click of add-another, to insert a copy of class="quote" where {{$index}} is also incremented on click. The idea is to allow unlimited addition of rows... So the result would be:

<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 the Add another quote button doesnt work, click on Add new quote at the top to insert new rows

I would really like to use the jQuery hide/show animations as rows get added/removed.

Albeit with a lot of errors!

Answer 1

OK... took me a bit but I developed a working example. This uses tinycarousel, but you should probably try to find an angular slider if you are into doing things by the book (I am not).

There's a lot of fluff and fanciness in here, but the basic idea was to make an array so that I could link an ng-repeat to it. Clicking on your trigger button simply pushes an incremented number to the array and... voila, angular takes care of the rest, automatically duplicating that whole section of the form you referred to.

Try 'Full Page' for better viewing:

$('.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>