Angularjs - 子アイテムを動的にプッシュすることができません

Question

フォームを使用していくつかのデータを動的に挿入するHTMLファイルに単純なネストされたjsonが埋め込まれています。

親レベルにデータを挿入できますが、子レベルに挿入することはできません。私が間違っていることは何ですか？ここで

はコードです：

<div class="container" ng-app="myApp" ng-controller="myCtrl"> 
     <label>Enter Data</label> 
     <input ng-model="name" type="text"> 
     <input ng-model="rollno" type="number"> 
     <input ng-model="id" type="text"> 
     <button ng-click="addData(data)">Enter Data</button> 
     <table class="table table-bordered"> 
      <tr> 
       <th>Sr No</th> 
       <th>Name</th> 
       <th>Roll No</th> 
       <th>Subjects</th> 
       <th>Delete</th> 
      </tr> 
      <tr ng-repeat="data in myData"> 
       <td>{{$index+1}}</td> 
       <td>{{data.name}}</td> 
       <td>{{data.rollno}}</td> 
       <td ng-repeat="subject in data.subjects">{{subject.id1}}, {{subject.id2}}</td> 
       <td><a href="" ng-click="removeData($index)">remove</a></td> 
      </tr> 
     </table> 
     </div> 
     <script> 
      var app = angular.module('myApp',[]); 
      app.controller('myCtrl',function($scope){ 
       $scope.myData =[{"name":"Jon","rollno":123,"subjects":[{"id1":"Maths","id2":"Hindi"}]},{"name":"Ron","rollno":234,"subjects":[{"id1":"English","id2":"Hindi"}]}]; 
       $scope.addData = function(data){ 
        $scope.myData.push({name:$scope.name,rollno:$scope.rollno,id1:$scope.id1}); 
       } 
       $scope.removeData = function(index){ 
        $scope.myData.splice(index, 1); 
       } 
      }); 
     </script> 

Answer 1

あなたは以下を行うことができますは、addData機能を使用して、同様の被験者を挿入しようとしている場合。 HTMLでは、これらのNG-モデルを追加

<input ng-model="name" type="text"> 
    <input ng-model="rollno" type="number"> 
    <input ng-model="id" type="text"> 
    <input ng-model="subid1" type="text"/> 
    <input ng-model="subid2" type="text"/> 

でjsの

  $scope.addData = function(data){ 
     var arrData = {name:$scope.name,rollno:$scope.rollno,subjects:[{id1:$scope.subid1,id2:$scope.subid2 }]}; 
     $scope.myData.push(arrData); 
    }