Question

我希望屏幕显示预订列表。完整列表位于.json文件中。预订选择进入缩短名称的机场。问题是我们显示了条目的名称，但是我们没有显示机场的名称？

我的reservations.html

<h3>Reserve for flight</h3>

<div class="controls controls-row">
  <input type="text" class="input-small" placeholder="Origin" ng-model="reserve.origin">
  <input type="text" class="input-small" placeholder="Destination" ng-model="reserve.destination">
</div>

<a href="" class="btn btn-primary" ng-click="reserveFlight()">Reserve</a>

<h3>Your Reservations</h3>

<table ng-show="reservations.length" class="table">
  <thead>
    <tr>
      <th>Number</th>
      <th>Origin</th>
      <th>Destination</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="flight in reservations">
      <td>{{flight.number}}</td>
      <td>
        <a ng-href="#/airports/{{flight.origin}}">
          {{flight.origin + ' - ' + flight.originFullName}}
        </a>
      </td>
      <td>
        <a ng-href="#/airports/{{flight.destination}}">
          {{flight.destination + ' - ' + flight.destinationFullName}}
        </a>
      </td>
    </tr>
  </tbody>
</table>

<div ng-hide="reservations.length" class="alert alert-info">
  You don't currently have any reservations, why not make one now?
</div>

我的app.js

'use strict'

angular.module('airline', ['ngRoute'])

  .config(['$routeProvider', function($routeProvider){
$routeProvider
    .when('/', {
      templateUrl: 'partials/destinations.html',
      controller: 'destinationsCtrl'
    })
    .when('/airports/:airportCode', {
      templateUrl: 'partials/airport.html',
      controller: 'airportCtrl'
    })
    .when('/flights', {
      templateUrl: 'partials/flights.html',
      controller: 'flightsCtrl'
    })
    .when('/reservations', {
      templateUrl: 'partials/reservations.html',
      controller: 'reservationsCtrl'
    })
}])

.controller('AppCtrl', function($scope){

  $scope.airportTemplate = 'partials/airport.html';

  $scope.setActive = function (type){
    $scope.destinationsActive = '';
    $scope.flightsActive = '';
    $scope.reservationsActive = '';

    $scope[type + 'Active'] = 'active';
  }
})

.controller('destinationsCtrl', ['$scope', '$http', function($scope, $http){
  $scope.setActive('destinations');

  $scope.sidebarURL = 'partials/airport.html'
  $scope.formURL = 'partials/form.html'

  $scope.currentAirport = null;

  $scope.setAirport = function(code){
    $scope.currentAirport = $scope.airports[code];
  };

  $scope.editAirport = function(code){
    $scope.editing = $scope.airports[code];
  };

  $http.get('data/airports.json').then(function(response){
    $scope.airports = response.data;
  });

}])

.controller('flightsCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
  $http.get('data/flights.json').then(function(response){
    $scope.flights = response.data;
});
  $scope.setActive('flights');
  $scope.airports = {};
}])

.controller('airportCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
  $http.get('data/airports.json').then(function(response){
    $scope.airports = response.data;
    $scope.currentAirport = $scope.airports[$routeParams.airportCode];
  });
}])

.controller('reservationsCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
  $http.get('data/flights.json').then(function(response){
    $scope.reservations = response.data;
    $scope.reservations = [];
    $scope.reserve = {origin: "", destination: ""};

    $scope.reserveFlight = function(){
        console.log($scope.reserve);
        $scope.reservations.push($scope.reserve);

    }
  });

  $scope.setActive('reservations');

}])

flights.json文件

{
    "number": 112,
    "origin": "ATL",
    "destination": "LAX",
    "price": 232,
    "originFullName": "Hartsfield Jackson Atlanta International Airport",
    "destinationFullName": "Los Angeles International Airport"
},
{
    "number": 812,
    "origin": "ATL",
    "destination": "JFK",
    "price": 192,
    "originFullName": "Hartsfield Jackson Atlanta International Airport",
    "destinationFullName": "John F. Kennedy International Airport"
}, ...

我们现在展示

它应该是这样的

Answer 1

当您获得JSON时，您使用空数组覆盖数据，将其全部丢失：

$http.get('data/flights.json').then(function(response){
    $scope.reservations = response.data;
    $scope.reservations = [];

我不知道你为什么要这样做，但自然会导致你在阵列中没有任何东西。它将是空的。

因此，您只会看到通过点击按钮添加的预订。但是，在您添加的对象中没有“originFullName”和“destinationFullName”，只有短名称。

由于基本逻辑错误，我无法修复您的代码。您可以为全名添加两个文本框，也可以不清除数组，您将看到现有数据。（但在添加新项目时仍然会看到部分内容。）

怎么把评论从json？

1 个答案: