Question

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

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

我的代码如下：

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

Answer 1

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在表中添加新行

1 个答案: