使用ng-repeat在表中添加新行 | repeat在表中添加新行

本文介绍了使用ng-repeat在表中添加新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一张桌子正在尝试执行以下功能:

I have one table in that am trying to do following functions:

最初会有一个空行并添加按钮.

Initially one empty row and add button will be there.

在第一行中输入详细信息后，单击添加按钮时，应添加新行并显示第一行值.

When I click add button after entering details in first row, new row should be added and the first row value also should be displayed.

我的下面的代码:

var app = angular
    .module("myApp", [])
    .controller("myCtrl", function ($scope, $http, $timeout) {
        $scope.addContactDetail = function () {
            $scope.contactDetails = {
                email: $scope.contactDetail.email,
                bolId: $scope.contactDetail.billId

            };
        }
    });

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.addbtn{
    text-align: center;
    background-color: #ededed;
    padding-top: 10px;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div>
    <table class="table table-striped table-bordered dataTable ">
        <thead>
        <tr>
            <th>Email</th>
            <th>B#</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="contactDetail in contactDetails">
            <td><label><input type="text" ng-model="contactDetail.email"/></label></td>
            <td>
                    <span class="onoffswitch margin-left-zero">
                        <input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
                               id="bill"
                               ng-model="menu.create"/>
                         <label class="onoffswitch-label" for="bill">
                         <span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
                                 class="onoffswitch-switch"></span>
                        </label>
                    </span>
            </td>

        </tr>
        <tr>
            <td><label><input type="text" ng-model="contactDetail.email"/></label></td>
            <td>
                        <span class="onoffswitch margin-left-zero">
                            <input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
                                   id="bill"
                                   ng-model="menu.create"/>
                             <label class="onoffswitch-label" for="bill">
                             <span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
                                     class="onoffswitch-switch"></span>
                            </label>
                        </span>
            </td>

        </tr>
        </tbody>

    </table>
    <div class="addbtn" ng-click="addDetail()">
        <span>ADD</span>
    </div>
</div>
</body>

当我在第一行输入数据后单击添加按钮时，将在第一行之前添加3个新行.怎么了?

When I click add button after entering data in first row, 3 new rows are being added before the first row. What's wrong?

推荐答案

您已添加了3个新行，因为您要向$scope.contactDetails对象和 ngRepeat 对其进行迭代.您只需拥有一个contactDetails数组，然后在您的addContactDetail方法中向该数组添加新项，就像这样:

You have 3 new rows added, since you are adding 3 properties to the $scope.contactDetails object and ngRepeat iterates over them. You simply can have an array of contactDetails and add new item to this array in your addContactDetail method, like this:

var app = angular
    .module("myApp", [])
    .controller("myCtrl", function ($scope) {
        //first row initially empty
        $scope.contactDetails = [{}];

        $scope.addContactDetail = function () {
          //add more empty rows
            $scope.contactDetails.push({});
        }
    });

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.addbtn{
    text-align: center;
    background-color: #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
    border-style: solid;
    border-color: #b3b3b3;
    border-width: 0px 1px 1px 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div>
    <table class="table table-striped table-bordered dataTable ">
        <thead>
        <tr>
            <th>Email</th>
            <th>B#</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="contactDetail in contactDetails">
            <td><label><input type="text" ng-model="contactDetail.email"/></label></td>
            <td>
					<span class="onoffswitch margin-left-zero">
						<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
                               id="{{contactDetail.bolId + 'Bol'}}"
                               ng-model="menu.create"/>
						 <label class="onoffswitch-label" for="{{contactDetail.bolId + 'Bol'}}">
						 <span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
                                 class="onoffswitch-switch"></span>
						</label>
					</span>
            </td>

        </tr>
        </tbody>

    </table>
    <div class="addbtn" ng-click="addContactDetail()">
        <span>ADD</span>
    </div>
</div>
</body>

这篇关于使用ng-repeat在表中添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！