Question

- 任务 - 选择下拉菜单后获取MEDIA API（Make Model Year）。

- 条件 - 收到“未定义”错误。是的，能够使用Make，Model，Year正确填充下拉菜单，但是当尝试将该结果传递给MEDIA $ http.get时，它会给出 - 'undefined'。

角

// *CONNECT & GET - LIST OF CAR MAKES*
// http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&api_key={api key}

$http.get('https://api.edmunds.com/api/vehicle/v2/makes?fmt=json&api_key=' + api_key )
    .success(function (data) {
        $scope.carMakes = data.makes; 
        console.log($scope.carMakes); 
        console.log($scope.carMakes[4].name); // Audi

        $scope.carModels = $scope.carMakes[4].models;
        console.log($scope.carModels[4].name); // A3


        $scope.carYears = $scope.carMakes[4].models[4].years[8]; 
        console.log($scope.carYears.year); // 2015

});

$scope.selectedCar.carmake = $scope.carMakes[4]; // <-ERROR HERE - 'undefined'

$scope.edmundsMake = "AUDI";
$scope.edmundsModel = "A3";
$scope.edmundsYear = "2015";

//GET the edmunds media api 
//Make Model Year photos
    $http.get('https://api.edmunds.com/api/media/v2/' + $scope.selectedCar.carmake + '/' + $scope.edmundsModel + '/' + $scope.edmundsYear + '/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key='+ api_key +'&fmt=json')
        .success(function (data) {
            $scope.carImages = data.photos;
            });

HTML - 是的工作;为MAKE＆gt;创建3个下拉菜单模型＆gt;年

 <div id="mmy" class="mmy">
    <div class="selectDdown col-lg-4 selectLabels">
    <!--  DROPDOWN of CarTypes by Carmake  -->

   <label for="{{ selectedCar.carmake }}"> Make  </label>
      <select ng-model="selectedCar.carmake" 
              ng-options="carMake.name for carMake in carMakes" 
              id="{{selectedCar.carmake}}"
              size="1">
              <option value=""> Make </option>
      </select>    
    </div>

    <!--  DROPDOWN of car models  -->
    <div class="selectDdown col-lg-4 selectLabels">
    <label for="{{ selectedCar.model }}"> Model </label>
      <select ng-model="selectedCar.model" 
              ng-options="carModel.name for carModel in selectedCar.carmake.models"
              id="{{selectedCar.model}}"
              size="1">
              <option value=""> Model </option>
      </select>
    </div>

    <!--  DROPDOWN of years  -->
    <div class="selectDdown col-lg-4 selectLabels">
    <label for="{{ selectedCar.year }}"> Year  </label>
      <select ng-model="selectedCar.year" 
              ng-options="y.year for y in selectedCar.model.years" 
              id="{{selectedCar.year}}"
              size="1">
              <option value=""> Year </option>
      </select>
    </div>
  </div>

Answer 1

$http是一个异步函数。这意味着$scope.carMakes在成功函数返回之前不可用。

将您的代码更改为：

$http.get('https://api.edmunds.com/api/vehicle/v2/makes?fmt=json&api_key=' + api_key )
.success(function (data) {
  $scope.carMakes = data.makes; 
  $scope.selectedCar.carmake = $scope.carMakes[4];
  ...
  $http.get('https://api.edmunds.com/api/media/v2/' + $scope.selectedCar.carmake + '/' + $scope.edmundsModel + '/' + $scope.edmundsYear + '/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key='+ api_key +'&fmt=json')
    .success(function (data) {
      $scope.carImages = data.photos;
    });
});

Answer 2

您需要移动此行以将最初选择的行设置为AJAX请求的回调，因为它是异步的

$scope.carMakes = data.makes; 
$scope.selectedCar.carmake = $scope.carMakes[4];

还要确保初始化selectedCar，$ scope.selectedCar = {};在此之前的某个时间。

AngularJS和Edmunds Media API创建MAKE MODEL YEAR下拉菜单，然后显示车辆图像

2 个答案: