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

我有一个表正在尝试执行以下功能：

最初将有一个空行和添加按钮。
当我在第一行输入详细信息后单击添加按钮时，应添加新行，并且还应显示第一行值。

我的代码如下：

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 个新行。怎么了？

您添加了 3 个新行，因为您要向$scope.contactDetails对象添加 3 个属性并ngRepeat迭代它们。您只需拥有一个contactDetails数组，并在addContactDetail方法中向该数组添加新项，如下所示：

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>

相关内容

最新更新

热门标签：