以角度js的表格格式显示表格数据

时间：2018-05-04 22:37:27

标签： javascript angularjs

我是角度js的新手，我想以表格格式显示json数据， 我有这样的Json如下

 {
"cars": [{
        "name": "Ford",
        "models": [{
                "state": "MH",
                "model": "Fiesta"
            },
            {
                "state": "BHR",
                "model": "Focus"
            },
            {
                "state": "DL",
                "model": "Mustang"
            }
        ]
    },
    {
        "name": "BMW",
        "models": [{
                "state": "MH",
                "model": "320"
            },
            {
                "state": "BHR",
                "model": "X3"
            },
            {
                "state": "DL",
                "model": "X5"
            }
        ]
    },
    {
        "name": "Fiat",
        "models": [{
                "state": "MH",
                "model": "300"
            },
            {
                "state": "BHR",
                "model": "Panda"
            },
            {
                "state": "DL",
                "model": "Punto"
            }
        ]
    }
]
}

我想以下面的格式使用上面的JSON和显示表 table format data

我尝试过跟随角度js代码

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
   $scope.records = {
   "name": "John",
   "age": 30,
   "cars": [
     {
       "name": "Ford",
       "models": [
         {
           "state": "MH",
           "model": "Fiesta"
         },
         {
           "state": "BHR",
           "model": "Focus"
         },
         {
           "state": "DL",
           "model": "Mustang"
         }
       ]
     },
     {
       "name": "BMW",
       "models": [
         {
           "state": "MH",
           "model": "320"
         },
         {
           "state": "BHR",
           "model": "X3"
         },
         {
           "state": "DL",
           "model": "X5"
         }
       ]
     },
     {
       "name": "Fiat",
       "models": [
         {
           "state": "MH",
           "model": "300"
         },
         {
           "state": "BHR",
           "model": "Panda"
         },
         {
           "state": "DL",
           "model": "Punto"
         }
       ]
     }
   ]
 }

});
<!DOCTYPE html>
    <html>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
       <body ng-app="myApp" ng-controller="myCtrl">
          <table border=1>
             <tbody ng-repeat="row in records.cars">
                <tr>
                   <th>State</th>
                   <th>{{row.name}}</th>
                </tr>
                <tr ng-repeat="sub in row.models">
                   <td>{{sub.state}}</td>
                   <td>{{sub.model}}</td>
                </tr>
             </tbody>
          </table>

       </body>
    </html>

但在运行上面的代码之后我得到了结果，

result Image

解决这个问题的方法是什么？

3 个答案:

答案 0 :(得分：0)

除非您更改记录对象，否则您无法以该格式显示您的表格。 您当前的数据是面向汽车的，但似乎您需要它以国家为导向！ 也许是这样的：

＆＃13;
＆＃13; 
             var app = angular.module("myApp", []);
             app.controller("myCtrl", function($scope) {
               $scope.records = {
                                  "name": "John",
                                  "age": 30,
                                  "states": [
                                  {
                                        "name": "MH",
                                        "ford": "Fiesta",
                                        "bmw": "320",
                                        "fiat": "300"
                                      },
                                      {
                                        "name": "BHR",
                                        "ford": "Focus",
                                        "bmw": "X3",
                                        "fiat": "Panda"
                                      },
                                      {
                                        "name": "DL",
                                        "ford": "Mustang",
                                        "bmw": "X5",
                                        "fiat": "Punto"                                      
                                      }
                                    ]
                                  }
                                });
＆＃13; 
<!DOCTYPE html>
    <html>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
       <body ng-app="myApp" ng-controller="myCtrl">
          <table border=1>
             <tbody >
                <tr>
                   <th>State</th>
                   <th>Ford</th>
                   <th>BMW</th>
                   <th>Fiat</th>
                </tr>

                <tr ng-repeat="row in records.states">
                   <th>{{row.name}}</th>
                   <th>{{row.ford}}</th>
                   <th>{{row.bmw}}</th>
                   <th>{{row.fiat}}</th>
                </tr>
             </tbody>
          </table>

       </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

如果您需要一些洞察力来重新格式化记录对象，可以查看此What is the most efficient method to groupby on a JavaScript array of objects?

答案 1 :(得分：0)

对数据记录进行排序和映射：

$scope.cols = $scope.records.cars.map(x => x.name);
$scope.states = $scope.records.cars[0].models.map(x => x.state);
$scope.getModel = function(stateIndex,colIndex) {
    return $scope.records.cars[colIndex].models[stateIndex].model;
};

＆＃13;
＆＃13; 
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = {
       "name": "John",
       "age": 30,
       "cars": [
         {
           "name": "Ford",
           "models": [
             {
               "state": "MH",
               "model": "Fiesta"
             },
             {
               "state": "BHR",
               "model": "Focus"
             },
             {
               "state": "DL",
               "model": "Mustang"
             }
           ]
         },
         {
           "name": "BMW",
           "models": [
             {
               "state": "MH",
               "model": "320"
             },
             {
               "state": "BHR",
               "model": "X3"
             },
             {
               "state": "DL",
               "model": "X5"
             }
           ]
         },
         {
           "name": "Fiat",
           "models": [
             {
               "state": "MH",
               "model": "300"
             },
             {
               "state": "BHR",
               "model": "Panda"
             },
             {
               "state": "DL",
               "model": "Punto"
             }
           ]
         }
       ]
    };
    $scope.cols = $scope.records.cars.map(x => x.name);
    $scope.states = $scope.records.cars[0].models.map(x => x.state);
    $scope.getModel = function(stateIndex,colIndex) {
        return $scope.records.cars[colIndex].models[stateIndex].model;
    }; 
});
＆＃13; 
<!DOCTYPE html>
    <html>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
       <body ng-app="myApp" ng-controller="myCtrl">
          <table border=1>
             <tbody>
                <tr>
                   <th>State</th>
                   <th ng-repeat="col in cols">{{col}}</th>
                </tr>
                <tr ng-repeat="state in states" ng-init="stateIndex=$index">
                   <td>{{state}}</td>
                   <td ng-repeat="col in cols">
                        {{getModel(stateIndex,$index)}}
                   </td>
                </tr>
             </tbody>
          </table>

       </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你几乎是自己完成的。如果每个州都有每个公司的汽车模型，只需添加float: left样式：

angular.module("myApp", []).controller("myCtrl", function($scope) {
   $scope.records = {
   "name":"John",
   "age":30,
   "cars":[{
        "name":"Ford",
        "models":[
            {"state":"MH","model":"Fiesta"},
            {"state":"BHR","model":"Focus"},
            {"state":"DL","model":"Mustang"}
          ]
      }, {
        "name":"BMW",
        "models":[
            {"state":"MH","model":"320"},
            {"state":"BHR","model":"X3"},
            {"state":"DL","model":"X5"}
          ]
      }, {
        "name":"Fiat",
        "models":[
            {"state":"MH","model":"300"},
            {"state":"BHR","model":"Panda"},
            {"state":"DL","model":"Punto"}
          ]
      }]
    }
});
.column {
   float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

 <body ng-app="myApp" ng-controller="myCtrl">
    <table border=1>
       <tbody ng-repeat="row in records.cars" class='column' ng-init='first=$first'>
          <tr>
             <th ng-if='first'>State</th>
             <th>{{row.name}}</th>
          </tr>
          <tr ng-repeat="sub in row.models | orderBy : 'state'">
             <td ng-if='first'>{{sub.state}}</td>
             <td>{{sub.model}}</td>
          </tr>
       </tbody>
    </table>
 </body>

相关问题
最新问题