javascript - 如何在 Angular 中动态添加新行

我有一张桌子。输入详细信息后单击添加新按钮时，最初会有一个空行，应该添加新行。我使用jquery做到了这一点，但我有点困惑。

var app = angular.module('myApp', [])
app.controller('myController', function ($scope) {
    $scope.addNewRow = function (educationDetails) {
        $scope.personalDetails.push({
            'qualification': educationDetails.qualification,
            'education_type': educationDetails.education_type,
            'grade': educationDetails.grade,
            'university': educationDetails.university,
            'city': educationDetails.city,
            'country': educationDetails.country
        });
        //$scope.PD = {};
    };
})

<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.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
    <form id="myForm">
        <div class="row margin0">
            <input type="submit" class="btn btn-primary addnewRow pull-right" value="Add New" ng-click="addNewRow"> </div>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Qualification</th>
                    <th>Course</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" class="form-control" ng-model="educationDetail.qualification" required /> </td>
                    <td>
                        <input type="text" class="form-control" ng-model="educationDetail.education_type" required /> </td>
                    <td>
                        <button>save</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

有帮助吗？谢谢！！

最佳答案

您可以声明一个数组以从表中输入字段的每一行捕获值。当您单击添加新行时，只需将一个空对象推入您的工作数组即可。以下仅是原始示例，以使您了解如何进行此操作。

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.educationDetails=[{}];
 $scope.addNewRow = function () {
        $scope.educationDetails.push({});
        //$scope.PD = {};
    };
})

<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.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
    <form id="myForm">
        <div class="row margin0">
            <input type="button" class="btn btn-primary addnewRow pull-right" value="Add New" ng-click="addNewRow()"> </div>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Qualification</th>
                    <th>Course</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="details in educationDetails">
                    <td>
                        <input type="text" class="form-control" ng-model="details.qualification" required /> </td>
                    <td>
                        <input type="text" class="form-control" ng-model="details.education_type" required /> </td>
                    <td>
                        <button>save</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <span>{{educationDetails}}</span>
    </form>
</div>