取得リクエストでJSONオブジェクトのリストを作成しようとしていますか？次のように

Question

は、私は私がデータ要求を取得するJSON NG-モデルのように結合して、入力フィールドに画面上に移入したいJSONオブジェクトのリストが含まれているGET要求をされてあります

[{"make":"Mahindra","vin":"1987","model":"XUV","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Nissan","vin":"2039","model":"Terrano","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Toyota","vin":"2456","model":"Camry","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Skoda","vin":"5012","model":"Rapid","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Toyota","vin":"1234","model":"FJ","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Ford","vin":"3401","model":"Ikon","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Tata","vin":"4568","model":"Nano","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]}] 

私が持っていましたリストのNGリピートを書かが、それは空白の入力フィールドをレンダリングし、 スクリプトはhtmlコードと一緒に次のようになります。私たちはmyRow LIKE単一のオブジェクトで行うように私は、JSONオブジェクトをパースするにはどうすればよい

<form> 
    <table id="tableRow" class="table table-bordered tableRow"> 
     <thead> 
     <tr> 
      <th></th> 
      <th><label>Make</label></th> 
      <th><label>Vin</label></th> 
      <th><label>Model</label></th> 
      <th><label>Parts</label></th> 
      <th><label></label></th> 
      <th><label></label></th> 
     </tr> 
     <tr ng-repeat="i in myRow"> 
      <td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button></td> 
      <td><input type="text" class="form-control" id="makeid" ng-model="myRow[i].make"></td> 
      <td><input type="text" class="form-control" id="vinid" ng-model="myRow[i].vin"></td> 
      <td><input type="text" class="form-control" id="modalid" ng-model="myRow[i].model"></td> 
      <td ng-repeat="part in myRow.item.parts"><input type="text" class="form-control" id="partsid" ng-model="part.name"><input type="text" class="form-control" id="partsid" ng-model="part.desc"></td> 
     </tr> 
     </thead>  
    <tbody id="tableROW"> 
    </tbody> 
    </table> 
    <button type="submit" class="btn btn-primary" ng-click="myRowSub()">Submit</button> 
    <button class="btn btn-warning" ng-click="myGet()">get</button> 
    </form> 

.parts ???次のように

GETのコードは次のとおりです。

<script> 
      var app = angular.module('myApp', []); 
      app.controller('myCtrl', function($scope, $http) { 
     $http.get("http://172.17.133.82:8080/restproj/v1/dealer/1234/allcar") 
        .then(function(response) { 
        $scope.myRow = response.data;  
       }); 
        $http.get("http://192.168.11.82:8080/restproj/v1/dealer") 
        .then(function(response) { 
        $scope.myRow = response.data; 

       }); 
</script> 

get要求は、スコープmyRowでJSONデータを保持しています。どうすれば個々の部品にアクセスして画面上にレンダリングすることができますか？代わりに、それの.....も私だけのポスト個々のレコードの代わりに、フォーム全体のデータを掲載することができます

Answer 1

はng-model="myRow[i].make "である必要がありますどのように
ng-model="i.make"

<tr ng-repeat="i in myRow"> 
      <td> 
       <button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button> 
      </td> 
      <td> 
       <input type="text" class="form-control" id="makeid" ng-model="i.make"> 
      </td> 
      <td> 
       <input type="text" class="form-control" id="vinid" ng-model="i.vin"> 
      </td> 
      <td> 
       <input type="text" class="form-control" id="modalid" ng-model="i.model"> 
      </td> 
      <td ng-repeat="part in i.parts"> 
       <input type="text" class="form-control" id="partsid" ng-model="part.name"> 
       <input type="text" class="form-control" id="partsid" ng-model="part.desc"> 
      </td> 
      </tr> 

DEMO

Answer 2

<tr ng-repeat="rowItem in myRow"> 
    <td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button></td> 
    <td><input type="text" class="form-control" id="makeid" ng-model="rowItem.make"></td> 
    <td><input type="text" class="form-control" id="vinid" ng-model="rowItem.vin"></td> 
    <td><input type="text" class="form-control" id="modalid" ng-model="rowItem.model"></td> 
    <td ng-repeat="part in rowItem.item.parts"><input type="text" class="form-control" id="partsid" ng-model="part.name"><input type="text" class="form-control" id="partsid" ng-model="part.desc"></td> 
</tr> 

これは役に立ちますか？ myRow [i]を使用していましたが、iが行項目なので、これをrに変更しました繰り返し内のowItem。

Answer 3

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 

 
    $scope.jsonObj = [{"make":"Mahindra","vin":"1987","model":"XUV","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Nissan","vin":"2039","model":"Terrano","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Toyota","vin":"2456","model":"Camry","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Skoda","vin":"5012","model":"Rapid","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Toyota","vin":"1234","model":"FJ","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Ford","vin":"3401","model":"Ikon","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]},{"make":"Tata","vin":"4568","model":"Nano","parts":[{"name":"wheel","desc":"makes it roll"},{"name":"engine","desc":"really shiny"},{"name":"Seats","desc":"leather seat covers"}]}]; 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form> 
 
    <table id="tableRow" class="table table-bordered tableRow"> 
 
     <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th><label>Make</label></th> 
 
      <th><label>Vin</label></th> 
 
      <th><label>Model</label></th> 
 
      <th><label>Parts</label></th> 
 
      <th><label></label></th> 
 
      <th><label></label></th> 
 
     </tr> 
 
     </thead>  
 
    <tbody id="tableROW"> 
 
      <tr ng-repeat="i in jsonObj"> 
 
      <td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button></td> 
 
      <td><input type="text" class="form-control" id="makeid" ng-model="i.make"></td> 
 
      <td><input type="text" class="form-control" id="vinid" ng-model="i.vin"></td> 
 
      <td><input type="text" class="form-control" id="modalid" ng-model="i.model"></td> 
 
      <td ng-repeat="part in i.parts"><input type="text" class="form-control" id="partsid" ng-model="part.name"><input type="text" class="form-control" id="partsid" ng-model="part.desc"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </form> 
 
</div>