关于javascript:点击后插入另一个模板

On click insert another template

我有一个带有表单的HTML页面,以及许多输入字段和轮播。表单的底部是一个button,用于添加另一个引号。.本质上是上面输入字段的副本(class="quote"的全部)。

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>

我想要实现的是在单击add-another时插入class = " quote "的副本,其中{{$ index}}也会在单击时增加。这个想法是允许无限增加行...因此结果将是:

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>