嘗試在獲取請求中填充JSON對象的列表？

Question

我有一個包含JSON對象的列表，我想在屏幕上填充在輸入欄像NG-模型數據結合的JSON get請求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"}]}] 

我writen一個NG重複的名單，但它呈現空白輸入域， 腳本看起來像這樣的HTML代碼一起：

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

我如何解析JSON對象就像我們在單個對象LIKE myRow做。部分 ？？？

的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]，但我是行項目，所以我將其更改爲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>