javascript - 如何以 Angular 动态添加新行

Question

我有一张 table 。最初，当我在输入详细信息后单击“添加新”按钮时，会出现一个空行，应该添加新行。
我使用 jquery 完成了此操作，但我对以 Angular 进行操作有点困惑。

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>

有什么帮助吗？谢谢!!

Answer 1

您可以声明一个数组来捕获表中输入字段的每一行的值。当您单击添加新行时，只需将一个空对象插入您的工作数组。以下只是简单的示例，让您了解如何继续进行此操作。

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>