Question

我有一张桌子。在输入细节后，当我点击添加新按钮时，最初将会有一个空行。应该添加新行。
我使用jquery做了这个，但我有点困惑在角度做它。

＆＃13;

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 = {};
    };
})

＆＃13;

<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>

＆＃13;

任何帮助？谢谢！

Answer 1

您可以声明一个数组来捕获表中输入字段的每一行的值。当您单击添加新行时，只需将空对象推入工作数组即可。以下只是一个原始的例子，让您了解如何继续这一点。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何以角度

1 个答案: