Настройки выбранный атрибут на опции нг-опции

Question

Проблемы

У меня есть два API, который возвращает информацию транспортного средства и транспортное средство типа. Когда я перейду к редактированию своего транспортного средства, вы увидите раскрывающиеся меню для VehicleType, а другие не будут соответствовать их соответствующим значениям, они останутся с «Please Select a Option».

HTML

<select class="browser-default" 
    ng-model="editedVehicle.vehicleTypeID" 
    ng-options="vehicleType.name for vehicleType in vehicleTypes track by vehicleType.id"> 

    <option value="" disabled selected>Select a Vehicle Type</option> 
</select> 

Controller Код

// Get Vehicle Types 
$http({ 
    url: '/api/vehicleType/', 
    method: 'GET', 
    headers: authenticationService.getAuthToken(), 
}).success(function (data) { 
    $scope.vehicleTypes = data; 

}).error(function() { 

}); 

// Get Vehicle 
$http({ 
    url: '/api/vehicle/' + $routeParams.id, 
    method: 'GET', 
    headers: authenticationService.getAuthToken(), 
}).success(function (data) { 
    $scope.editedVehicle = data; 

}).error(function() { 

}); 

Типичный Тип транспортного средства Ответ Данные

[ 
    { 
     "id":1, 
     "name":"Artic" 
    }, 
    { 
     "id":2, 
     "name":"Rigid" 
    }, 
    { 
     "id":3, 
     "name":"Van" 
    } 
] 

Типичные Vehicle Response Данные

{ 
    "$id":"1", 
    "id":0, 
    "vin":"", 
    "registrationNumber":"", 
    "fuelCapacity":, 
    "grossWeight":, 
    "trainWeight":, 
    "colour":"Air Force blue", 
    "manufacturer":"Mercedes-Benz", 
    "model":"Axor", 
    "vehicleType":"Rigid", 
    "modelID":16, 
    "vehicleTypeID":2, 
    "colourID":1, 
    "maintenanceVM":{ 
     "$id":"2", 
     "serviceDate":"18/02/2016", 
     "motDate":"07/09/2016", 
     "taxExpiryDate":"02/09/2016", 
     "oLicenseExpiryDate":"04/02/2017" 
    }, 
} 

Вопрос

Как убедиться, что с ответом я получаю автоматически устанавливается выпадающее меню к нужному элементу.

Answer 1

var app = angular.module('myApp', []); 
 

 
app.controller("myCtrl", function ($scope) { 
 
    $scope.editedVehicle = {vehicleTypeID: ''}; 
 
    $scope.selectVehicleType = function(vehicleType) { 
 
     $scope.editedVehicle.vehicleTypeID = vehicleType; 
 
    }; 
 
    $scope.vehicleTypes = [ 
 
     { 
 
     "id":1, 
 
     "name":"Artic" 
 
     }, 
 
     { 
 
     "id":2, 
 
     "name":"Rigid" 
 
     }, 
 
     { 
 
     "id":3, 
 
     "name":"Van" 
 
     } 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
    <select class="browser-default" ng-model="editedVehicle.vehicleTypeID" 
 
    ng-options="vehicleType.id as vehicleType.name for vehicleType in vehicleTypes"> 
 
     <option value="" disabled selected>Select a Vehicle Type</option> 
 
    </select> 
 
    <button ng-click="selectVehicleType(2)">Select Rigid</button> 
 
    </div> 
 
</div>