Po kliknięciu wstaw inny szablon

Question

Mam stronę HTML z formularzem i liczbą pól wejściowych i karuzeli. Na dole formularza znajduje się button do Dodaj kolejny cytat .. Zasadniczo kopia pól wejściowych powyżej (całość 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> 

co próbuję osiągnąć to, że w dniu kliknięcia add-another, wstawić kopię class = "quote" gdzie {{$ index}} jest również zwiększany o kliknięcia. Chodzi o to, aby umożliwić nieograniczoną dodawanie wierszy ... więc wynikiem będzie:

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

Oto bardzo szybka próba z plunker: http://plnkr.co/edit/bl1BMkLbeT2tr907lJYK?p=preview

Zanotuj Dodaj kolejny cytat przycisk robi praca, kliknij na Dodaj nowy cytat u góry, aby wstawić nowe wiersze.

Bardzo chciałbym użyć animacji hide/show jQuery, gdy wiersze zostaną dodane/usunięte.

Mimo wielu błędów!

Answer 1

OK ... zabrał mnie trochę, ale opracowałem działający przykład. Wykorzystuje to tinycarousel, ale prawdopodobnie powinieneś spróbować znaleźć kątowy suwak, jeśli robisz coś w książce (nie jestem).

Tutaj jest dużo fluff i fanciness, ale podstawową ideą było stworzenie tablicy, aby móc połączyć z nią powtórzenie. Kliknięcie przycisku spustowego powoduje po prostu przesunięcie zwiększonej liczby do tablicy i ... voila, angular zajmuje się resztą, automatycznie duplikując całą sekcję formularza, do którego się odwołałeś.

Try 'Cała strona' dla lepszego obrazu:

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