Question

我正在调用一个API，并希望使用anugularjs以表格格式打印JSON结果。因此，我在函数（myfunc）中声明了一个硬编码的array（train）。现在，我想以表格格式打印数组。这是我尝试的代码：

function myfunc() {
  var train = [{
      "TrainNo": "11043",
      "TrainName": "MADURAI EXPRESS",
      "Source": "LTT",
      "ArrivalTime": "03:50",
      "Destination": "PUNE",
      "DepartureTime": "00:15",
      "TravelTime": "03:35H",
      "TrainType": "EXP"
    },
    {
      "TrainNo": "16533",
      "TrainName": "BGKT SBC EXPRES",
      "Source": "KYN",
      "ArrivalTime": "04:10",
      "Destination": "PUNE",
      "DepartureTime": "01:05",
      "TravelTime": "03:05H",
      "TrainType": "EXP"
    }
  ];
}
myfunc();
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
  $scope.names = train;
});

<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body>

  <div ng-app="myApp" ng-controller="Ctrl">

    <table>
      <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Department</th>
      </tr>
      <tr ng-repeat="x in names">

        <td>{{x.TrainName}}</td>
        <td>{{x.TrainName}}</td>
        <td>{{x.Source}}</td>
        <td>{{x.Class}}</td>
        <td>{{ x.Department}}</td>
      </tr>
    </table>

  </div>

</body>

</html>

我已经尝试了这段代码，但是仍然无法在表中插入数据。

Answer 1

第一件事。您已经在函数中声明了变量train，因此无法将其访问控制器。将其设置为全局变量也不是一个好主意。由于您使用的是angularjs，因此可以使用其主要功能之一，称为service （在下面的代码中查看它，以及如何使用它）。

第二，您应始终将<th>的计数与<td>相同。在您的代码中，您有3 <th>和5 <td>

第三，您正在调用未在对象中声明的属性。始终使用在对象中声明的属性。

您可以在下面运行我的代码以检查正确的输出

  
  var app = angular.module('myApp', []);
  
  app.service('TrainService', function() {
    var train = [{
        "TrainNo": "11043",
        "TrainName": "MADURAI EXPRESS",
        "Source": "LTT",
        "ArrivalTime": "03:50",
        "Destination": "PUNE",
        "DepartureTime": "00:15",
        "TravelTime": "03:35H",
        "TrainType": "EXP"
      },
      {
        "TrainNo": "16533",
        "TrainName": "BGKT SBC EXPRES",
        "Source": "KYN",
        "ArrivalTime": "04:10",
        "Destination": "PUNE",
        "DepartureTime": "01:05",
        "TravelTime": "03:05H",
        "TrainType": "EXP"
      }
    ];
    
    return { getTrain: getTrain };
    
    function getTrain() {
      return train;
    }
  });
  
  app.controller('Ctrl', function($scope, TrainService) {
    $scope.names = TrainService.getTrain();
  });

<!DOCTYPE html>
    <html>
    <style>
      table,
      th,
      td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
      }
      
      table tr:nth-child(odd) {
        background-color: #f1f1f1;
      }
      
      table tr:nth-child(even) {
        background-color: #ffffff;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.0.0.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>

    <body>

      <div ng-app="myApp" ng-controller="Ctrl">

        <table>
          <tr>
            <th>TrainNo</th>
            <th>Name</th>
            <th>Source</th>
            <th>Destination</th>
            <th>TrainType</th>
          </tr>
          <tr ng-repeat="x in names">

            <td>{{x.TrainNo}}</td>
            <td>{{x.TrainName}}</td>
            <td>{{x.Source}}</td>
            <td>{{x.Destination}}</td>
            <td>{{x.TrainType}}</td>
          </tr>
        </table>

      </div>

    </body>

    </html>

Answer 2

你去了。您的训练变量在控制器内部不可用，因为它仅在myFunc内部可用，因为变量在javascript中具有函数作用域。以下是一段有效的代码。进一步了解javascript scope here

var train=[
{
"TrainNo": "11043",
"TrainName": "MADURAI EXPRESS",
"Source": "LTT",
"ArrivalTime": "03:50",
"Destination": "PUNE",
"DepartureTime": "00:15",
"TravelTime": "03:35H",
"TrainType": "EXP"
}
,
{
"TrainNo": "16533",
"TrainName": "BGKT SBC EXPRES",
"Source": "KYN",
"ArrivalTime": "04:10",
"Destination": "PUNE",
"DepartureTime": "01:05",
"TravelTime": "03:05H",
"TrainType": "EXP"
}];

var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope){
 $scope.names=train;   
});

<!DOCTYPE html>
<html>
<style>
table, th , td  {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script
src="https://code.jquery.com/jquery-3.0.0.js"> </script>
<script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
</script>

<body>

<div ng-app="myApp" ng-controller="Ctrl"> 

<table>
  <tr>
  <th>Name</th>
  <th>Class</th>
  <th>Department</th>
  </tr>
  <tr ng-repeat="x in names" >

   <td>{{x.TrainName}}</td>
   <td>{{x.TrainName}}</td> 
   <td>{{x.Source}}</td> 
   <td>{{x.Class}}</td>
   <td>{{ x.Department}}</td>
 </tr>
 </table>

</div>

</body>
</html>

希望这会有所帮助：）

如何使用angularjs以表格格式打印数组？

2 个答案: