角で動的に新しい行を追加する方法

Question

テーブルが1つあります。最初に、詳細を入力した後に新しいボタンを追加するをクリックすると、新しい行が追加されるはずです。
私は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>

任意のヘルプ？ありがとう!!

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>