CODEWITHSUNDEEP
angularjs
John Cooling
John Cooling

Reputation: 415

Setting selected attribute on option on ng-options

Problem

I have two API's which returns vehicle information and vehicle types. When I go to my vehicle edit view the drop-down menus for VehicleType and others are not being set to their corresponding values, they remain with "Please Select an 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 Code

// 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 () {

});

Typical Vehicle Type Data Response

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

Typical Vehicle Data 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"
   },
}

Question

How do I make sure with the response I get automatically set the drop down menus to the required item.

Upvotes: 0

Views: 1218

Answers (2)

mojsh
mojsh

Reputation: 11

try it: create option tag with null value in html page and

Choose One 
<script >
var app = angular.module("app", []);

app.controller("ctrl", function ($scope) {

$scope.names = {
    car01: {
        brand: "Ford",
        model: "Mustang",
        color: "red"
    },
    car02: {
        brand: "Fiat",
        model: "500",
        color: "white"
    },
    car03: {
        brand: "Volvo",
        model: "XC90",
        color: "black"
    },

};

});

Upvotes: 1

Alexander Elgin
Alexander Elgin

Reputation: 6956

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>

Upvotes: 1

Related Questions