Angularjs - nicht in der Lage, Kinder Elemente dynamisch zu schieben

Question

Ich habe eine einfache verschachtelte JSON in meine HTML-Datei eingebettet, die ich einige Daten dynamisch mit Hilfe von Formular einfügen möchte.

Ich kann Daten in die übergeordnete Ebene einfügen, aber nicht in untergeordnete Ebene einfügen. Was mache ich falsch? Hier

ist der Code:

<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

Wenn Sie Themen versuchen, so gut einfügen addData mit Funktion können Sie die unten tun können. In html diese ng-Modelle

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

In js

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