ng-repeat object 在同一行中的嵌套数组

Question

我正在尝试将数据绑定在嵌套数组的同一行中。

我的对象数组

$scope.Record = [
{ Name:'Adam', 

Months:[
 {Month: 'Jan', Value: 10, cust:2},
 {Month: 'Feb', Value: 30, cust:2}
 {Month: 'March', Value: 30, cust:2}
 {Month: 'April', Value: 50 , cust:2}
 {Month: 'June', Value: 15 , cust:2}
 ] },

  { Name:'John', 
Months:[
 {Month: 'Jan', Value: 10 , cust:3},
 {Month: 'Feb', Value: 30,, cust:6}
 {Month: 'March', Value: 30,, cust:8}
 {Month: 'April', Value: 50,, cust:13}
 {Month: 'June', Value: 15,, cust:20}
 ] }
]

我的观点

     <tr>
         <th colspan="1">Customer</th>
         <th colspan="2">January</th>
         <th colspan="2">February</th>
         <th colspan="2">March</th>
          <th colspan="2">April</th>
          <th colspan="2">May</th>
          <th colspan="2">June</th>
    </tr>
     <tr>
       <th>Name</th>
       <th>Value</th>
       <th>Cust</th>
     </tr>
    <tbody>
    <tr ng-repeat="rc in Record">
      <td ng-bind="rc.Name"></td>
      <td ng-bind="rc.Months[0].Value"></td>
      <td ng-bind="rc.Months[0].cust"></td>
     </tr>
    </tbody>

如何将 Object 的所有 Months 数组绑定在同一行。 我正在尝试所有的事情，但没有得到任何运气。

谢谢

Answer 1

下面的代码和一个工作示例： https://jsfiddle.net/galeroy/z97u230v/22/

controller

angular.module('myApp', []).
  controller('MyController', ['$scope', function($scope) { 
    
    $scope.allMonths = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June"
    ]

    $scope.records = [
      { 
        name:'Adam', 
        months:[
          {month: 'January', value: 10, cust:2},
          {month: 'February', value: 30, cust:2},
          {month: 'March', value: 30, cust:2},
          {month: 'April', value: 50 , cust:2},
          {month: 'May', value: null , cust: null},
          {month: 'June', value: 15 , cust:2}
        ] 
      },
      { 
        name:'John', 
        months:[
            {month: 'January', value: 10 , cust:3},
            {month: 'February', value: 30, cust:6},
            {month: 'March', value: 30, cust:8},
            {month: 'April', value: 50, cust:13},
            {month: 'May', value: null , cust: null},
            {month: 'June', value: 15, cust:20}
          ] 
        }
      ]

}]);

看法

    <!DOCTYPE html>

    <html ng-app="myApp">
        <head>
            <title>Angular Test Project</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
            <style>
                th, td {
                    border: #000 solid 1px;
                    padding: 10px;
                }
                td {
                    text-align: center;
                }
            </style>
        </head>

        <body ng-controller="MyController">
            <table>
                <thead>
                    <tr>
                        <th colspan="1">Customer</th>
                        <th colspan="2" ng-repeat="x in allMonths">{{x}}</th>
                    </tr>
                </thead>
                <tbody ng-repeat="rc in records">
                    <tr>
                        <td>{{rc.name}}</td>
                        <td colspan="2" ng-repeat="item in rc.months">
                           <span ng-if="item.value">val: </span> {{item.value}}
                           <span ng-if="item.value && item.cust">, </span>
                           <span ng-if="item.cust">cust:</span> {{item.cust}}        
                        </td>
                    </tr>
                </tbody>
            </table>

            <script src="my-controller.js"></script>         
        </body>
    </html>