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

【问题标题】：Add new row in a table using ng-repeat使用 ng-repeat 在表中添加新行
【发布时间】：2018-01-12 06:48:54
【问题描述】：

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

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

我的代码如下：

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

【问题讨论】：

见this
jQuery 需要在页面中的 AngularJS 之前包含。您还使用了onclick 而不是ng-click。 Here 是您示例的分叉工作小提琴。
@31piy 谢谢。请检查我的更新问题。

标签： angularjs

【解决方案1】：

您添加了 3 个新行，因为您正在向 $scope.contactDetails 对象和 ngRepeat iterates over them 添加 3 个属性。您只需拥有一个 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>

【讨论】：

@user7397787 您的contactDetails 数组未绑定到$scope 对象，并且每次调用add 方法时都会初始化，这就是ngRepeat 不显示添加的行的原因。看看this working fiddle。