Question

我有一个get请求，其中包含一个JSON对象列表，我希望在输入字段中在屏幕上填充数据绑定，如ng-model，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-repeat，但它渲染了一个空白的输入字段，脚本与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对象，就像我们在单个对象中一样解析myRow.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是行项目，所以我在重复中将其更改为rowItem。

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>

试图在get请求中填充JSON对象列表？

3 个答案: