与えられた値でhtmlテーブルフィールドを設定する

Question

これは私が探しているものです。

私はサーバーからの応答があります。そしてjsonはこのように見えます。

[ 
    { 
    "id": 2, 
    "serial_number": 9011, 
    "description": null, 
    "number_of_plates": 0, 
    "data_directory_id": null, 
    "mandrel_id": 53, 
    "geometry_id": 3, 
    "robot_id": null, 
    "stack_type_id": 4, 
    "project_id": 1, 
    "equipment_status_code_id": 17, 
    "process_id": null, 
    "dies_id": 2, 
    "storage_location_id": null, 
    "xray_measurement_id": null, 
    "metrology_data_file_id": null, 
    "data_representation_id": null, 
    "created_by": null, 
    "created_at": "2017-01-04 15:22:57", 
    "updated_at": "2017-01-04 15:33:20", 
    "updated_by": 1, 
    "xou_id": null, 
    "plates": [ 
     { 
     "id": 51, 
     "serial_number": "1234", 
     "crc_code": "2", 
     "reason": "this is a test", 
     "supplier_id": 5001, 
     "equipment_status_code_id": 1, 
     "plate_type_id": null, 
     "coating_id": null, 
     "metrology_data_file_id": null, 
     "project_id": 8, 
     "plate_container_id": null, 
     "container_slot_id": null, 
     "orientation_id": 21, 
     "plate_quality_id": 51, 
     "wafer_id": 51, 
     "data_representation_id": null, 
     "xray_measurement_id": null, 
     "process_id": 51, 
     "created_by": null, 
     "created_at": "2016-12-30 11:45:29", 
     "updated_at": "2017-01-09 09:32:22", 
     "updated_by": 1, 
     "pivot": { 
      "stack_id": 2, 
      "plate_id": 51, 
      "created_at": "2017-01-09 09:32:22", 
      "updated_at": "2017-01-09 09:32:22", 
      "position": 1 
     } 
     }, 
     { 
     "id": 52, 
     "serial_number": "2214", 
     "crc_code": "2", 
     "reason": null, 
     "supplier_id": 5002, 
     "equipment_status_code_id": 1, 
     "plate_type_id": null, 
     "coating_id": null, 
     "metrology_data_file_id": null, 
     "project_id": null, 
     "plate_container_id": null, 
     "container_slot_id": null, 
     "orientation_id": 17, 
     "plate_quality_id": 51, 
     "wafer_id": 51, 
     "data_representation_id": null, 
     "xray_measurement_id": null, 
     "process_id": 51, 
     "created_by": null, 
     "created_at": "2016-12-30 11:45:29", 
     "updated_at": "2017-01-09 09:32:35", 
     "updated_by": 1, 
     "pivot": { 
      "stack_id": 2, 
      "plate_id": 52, 
      "created_at": "2017-01-09 09:32:35", 
      "updated_at": "2017-01-09 09:32:35", 
      "position": 1 
     } 
     } 
    ] 
    } 
] 

私が達成しようとしているのは、このようなテーブルに何かを持つことです。

--------------------------------- 
| Stack | Plate  | Position |    
---------------------------------- 
| 9011 | 1234  |  1 
---------------------------------- 
| 9011 | 2214  |  1 
---------------------------------- 

これは私が今持っているものです。

<tbody ng-repeat="item in responseFromServer "> 
    <tr> 
     <td>{{item.serial_number}}</td> 
     <td> 
      <span ng-repeat="plate in item.plates"> 
       {{plate.serial_number}} 
       <span ng-if="!$last">,</span> 
      </span> 
     </td> 

     <td> 
      <span ng-repeat="p in item.plates"> 
       <div ng-if="p.pivot.position === null"> 
        <span class="badge badge-black">Not set</span> 
       </div> 
       {{p.pivot.position}} 
       <span ng-if="!$last">,</span> 
      </span> 
     </td> 
    </tr> 

</tbody> 

しかし、これは私が求めているものではありません。

ありがとうございました！

Answer 1

これを試してみてください！ <tr>

<tbody ng-repeat="item in responseFromServer "> 
     <tr ng-repeat="plate in item.plates"> 
     <td>{{item.serial_number}}</td> 
     <td> 
      <span> 
      {{plate.serial_number}} 
     </span> 
     </td> 

var app = angular.module("app", []); 
 
app.controller("ctrl", function($scope) { 
 
    $scope.responseFromServer = [{ 
 
    "id": 2, 
 
    "serial_number": 9011, 
 
    "description": null, 
 
    "number_of_plates": 0, 
 
    "data_directory_id": null, 
 
    "mandrel_id": 53, 
 
    "geometry_id": 3, 
 
    "robot_id": null, 
 
    "stack_type_id": 4, 
 
    "project_id": 1, 
 
    "equipment_status_code_id": 17, 
 
    "process_id": null, 
 
    "dies_id": 2, 
 
    "storage_location_id": null, 
 
    "xray_measurement_id": null, 
 
    "metrology_data_file_id": null, 
 
    "data_representation_id": null, 
 
    "created_by": null, 
 
    "created_at": "2017-01-04 15:22:57", 
 
    "updated_at": "2017-01-04 15:33:20", 
 
    "updated_by": 1, 
 
    "xou_id": null, 
 
    "plates": [{ 
 
     "id": 51, 
 
     "serial_number": "1234", 
 
     "crc_code": "2", 
 
     "reason": "this is a test", 
 
     "supplier_id": 5001, 
 
     "equipment_status_code_id": 1, 
 
     "plate_type_id": null, 
 
     "coating_id": null, 
 
     "metrology_data_file_id": null, 
 
     "project_id": 8, 
 
     "plate_container_id": null, 
 
     "container_slot_id": null, 
 
     "orientation_id": 21, 
 
     "plate_quality_id": 51, 
 
     "wafer_id": 51, 
 
     "data_representation_id": null, 
 
     "xray_measurement_id": null, 
 
     "process_id": 51, 
 
     "created_by": null, 
 
     "created_at": "2016-12-30 11:45:29", 
 
     "updated_at": "2017-01-09 09:32:22", 
 
     "updated_by": 1, 
 
     "pivot": { 
 
     "stack_id": 2, 
 
     "plate_id": 51, 
 
     "created_at": "2017-01-09 09:32:22", 
 
     "updated_at": "2017-01-09 09:32:22", 
 
     "position": 1 
 
     } 
 
    }, { 
 
     "id": 52, 
 
     "serial_number": "2214", 
 
     "crc_code": "2", 
 
     "reason": null, 
 
     "supplier_id": 5002, 
 
     "equipment_status_code_id": 1, 
 
     "plate_type_id": null, 
 
     "coating_id": null, 
 
     "metrology_data_file_id": null, 
 
     "project_id": null, 
 
     "plate_container_id": null, 
 
     "container_slot_id": null, 
 
     "orientation_id": 17, 
 
     "plate_quality_id": 51, 
 
     "wafer_id": 51, 
 
     "data_representation_id": null, 
 
     "xray_measurement_id": null, 
 
     "process_id": 51, 
 
     "created_by": null, 
 
     "created_at": "2016-12-30 11:45:29", 
 
     "updated_at": "2017-01-09 09:32:35", 
 
     "updated_by": 1, 
 
     "pivot": { 
 
     "stack_id": 2, 
 
     "plate_id": 52, 
 
     "created_at": "2017-01-09 09:32:35", 
 
     "updated_at": "2017-01-09 09:32:35", 
 
     "position": 1 
 
     } 
 
    }] 
 
    }]; 
 
});

table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <table> 
 
    <tbody ng-repeat="item in responseFromServer "> 
 
     <tr ng-repeat="plate in item.plates"> 
 
     <td>{{item.serial_number}}</td> 
 
     <td> 
 
      <span> 
 
      {{plate.serial_number}} 
 
     </span> 
 
     </td> 
 

 
     <td> 
 
      <span ng-repeat="p in item.plates"> 
 
         <div ng-if="p.pivot.position === null"> 
 
          <span class="badge badge-black">Not set</span> 
 
</div> 
 
{{p.pivot.position}} 
 
<span ng-if="!$last">,</span> 
 
</span> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
<div ng-app="app" ng-controller="ctrl">

Answer 2

jsonを移行するためにangular.fromJsonを使用しましたか？ ここをクリックしてください：https://docs.angularjs.org/api/ng/function/angular.fromJson