get dropdown value for SELECT from db instead of hardcoding at UI (Angularjs)

Question

I have the following dropdown select HTML tags

<label>Car:</label>
<select ng-model="params.CarName">
  <option value="x" disabled="" selected="">Select Car...</option>
  <option value="BMW">BMW</option>
  <option value="Audi">Audi</option>
</select>

<label>Model:</label>
<select ng-if="params.CarName == 'BMW'" ng-model="params.CarModel" ng-change="PerfRpt()">
  <option value="x" disabled="" selected="">BMW Sports</option>
  <option value="BMW 328i">BMW 328i</option>
  <option value="BMW Sports">BMW Sports</option>
</select>

<select ng-if="params.CarName == 'Audi'" ng-model="params.CarModel" ng-change="PerfRpt()">
  <option value=" " disabled="" selected="">Audi Sports</option>
  <option value="Audi i345">Audi i345</option>
  <option value="Audi Sports">Audi Sports</option>
</select>

<select ng-if="params.CarName!= 'BMW' && params.CarName != 'Audi'">
  <option>-</option>
</select>

As per the above code, this is wat it does, We have a dropdown to select Car. It is either BMW or Audi.

Depending on this selection, The Model dropdown will be shown. For e.g If we select Audi for Car in the first dropdown, then Audi i345 and Audi Sports will be shown as the dropdown in the 'Model' field.

Similarly, other options will be shown if we select BMW.

Now I am planning to put the Car data in DB along with Model data. Once the page loads, the data will be retrieved and displayed to the user for the 'Car' section. Once the car is selected, depending on the value of the car, its corresponding Model will be updated in the Model section then.

I can get the data from backend to frontend. I want to know how to display those values dynamically and not hardcode like I have done here.

I have the following response from database for the Car.

Results: Array[2]
  0: Object
        Car:BMW
  1: Object
        Car:Audi

Well, your question is a bit unclear.. how are you getting the items from your DB? — developer033
– developer033, Commented Aug 1, 2016 at 19:26
@developer033- The response of the ajax call is edited in the question now. This is only for the Car dropdown — Patrick
– Patrick, Commented Aug 1, 2016 at 21:13

inostia · Accepted Answer · 2016-08-01 21:14:18Z

4

You need an array with the Car Names, eg.

$scope.carNameOptions = [
    'BMW'
    'Audi'
];

Then you would do this:

<select ng-model="params.CarName">
    <option value="">Select car...</option>
    <option ng-repeat="car in carNameOptions" value="{{car}}">{{car}}</option>
</select>

I would suggest making params.CarModel an object with the keys being the CarNames, and the value an array with options for the car like above. Then you can do this:

<select ng-model="params.CarModel">
    <option value="">Select model...</option>
    <option ng-repeat="carModel in carModelOptions[params.CarName]" value="{{carModel}}">{{carModel}}</option>
</select>

eg

$scope.carModelOptions = {
    'BMW' : [
        'BMW 328i',
        ...
    ],
    'Audi' : [...]
}

edited Aug 1, 2016 at 21:14

answered Aug 1, 2016 at 21:03

inostia

8,0633 gold badges34 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Patrick Over a year ago

@inostia- i have edited the question with the value i get from database for the Car dropdown. Can i be able to assign this response from backend straight away using ng-repeat as you mentioned above

inostia Over a year ago

Yes see my edited answer for use with a simple array (where the option values are the same as the displayed name).

Patrick Over a year ago

Yours is an array with Car Names. Mine is a different format which i get from database. Can you tell me how to convert that array of objects into an arraylist please ?

inostia Over a year ago

Something like can use the object straight away <option ng-repeat="option in carsFromDatabase" value="{{option.Car}}">{{option.Car}}</option>

Patrick Over a year ago

@inostia- this is great help. Thanks.

developer033 · Accepted Answer · 2016-08-01 21:46:56Z

Since you have only the cars models stored in your database, you can retrieve them and then make a new array putting inside it the types, as follows:

(function() {
  "use strict";

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    // From database
    var data = [
      'BMW',
      'Audi'
    ];

    $scope.cars = [  
      {  
        "model":"BMW",
        "types":[  
          "BMW 328i",
          "BMW Sports"
        ]
      },
      {  
        "model":"Audi",
        "types":[  
          "Audi i345",
          "Audi Sports"
        ]
      }
    ];
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <div class="col-md-12">
    <select class="form-control" ng-options="car.model for car in cars" ng-model="carSelected">
      <option value="" label="Select a car" hidden></option>
    </select>
    <select class="form-control" ng-disabled="!carSelected" ng-options="type for type in carSelected.types" ng-model="typeSelected">
      <option value="" label="Select a type" hidden></option>
    </select>
    <hr>
    Car selected: <pre ng-bind="carSelected | json"></pre>
    Type selected: <pre ng-bind="typeSelected"></pre>
  </div>
</body>

</html>

Note: I've used ngOptions directive, which one MUST be used for <select>, not ngRepeat.

I hope it helps.

Collectives™ on Stack Overflow

get dropdown value for SELECT from db instead of hardcoding at UI (Angularjs)

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related