Drop-Down-Wert für SELECT erhalten von db statt bei UI von hartzucodieren (AngularJS)

Ich habe die folgenden ausgewählten Drop-Down-HTML-TagsDrop-Down-Wert für SELECT erhalten von db statt bei UI von hartzucodieren (AngularJS)

<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>

Gemäß dem obigen Code, das wat tut es ist, wir haben eine Dropdown-Liste Wählen Sie Auto. Es ist entweder BMW oder Audi.

Abhängig von dieser Auswahl wird das Dropdown-Menü "Modell" angezeigt. Wenn z. B. im ersten Dropdown-Menü Audi for Car ausgewählt wird, werden Audi i345 und Audi Sports im Dropdown-Feld "Modell" angezeigt.

In ähnlicher Weise werden andere Optionen angezeigt, wenn wir BMW auswählen.

Jetzt plane ich, die Auto-Daten in DB zusammen mit Modelldaten zu setzen. Sobald die Seite geladen ist, werden die Daten abgerufen und dem Benutzer für den Bereich "Auto" angezeigt. Sobald das Auto ausgewählt ist, wird das entsprechende Modell je nach Wert des Autos im Abschnitt Modell aktualisiert.

Ich kann die Daten vom Backend zum Frontend bekommen. Ich möchte wissen, wie diese Werte dynamisch angezeigt werden und nicht wie bei mir.

Ich habe die folgende Antwort aus der Datenbank für das Auto.

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

Quelle

2016-08-01 Patrick

Nun, Ihre Frage ist ein wenig unklar .. Wie bekommen Sie die Artikel aus Ihrer DB? – developer033

@ developer033- Die Antwort des Ajax-Aufrufs wird jetzt in der Frage bearbeitet. Dies ist nur für das Auto-Dropdown – Patrick

Sie benötigen ein Array mit den Autonamen, z.

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

Dann würden Sie dies tun:

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

Ich würde vorschlagen, params.CarModel ein Objekt mit den Tasten die CarNames machen sind und der Wert ein Array mit Optionen für das Auto wie oben. Dann können Sie dies tun:

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

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

Quelle

2016-08-01 21:03:34 inostia

@ inostia- Ich habe die Frage mit dem Wert bearbeitet, den ich aus der Datenbank für das Auto Dropdown bekommen. Kann ich diese Antwort vom Backend sofort mit Hilfe von ng-repeat zuweisen, wie Sie oben erwähnt haben? – Patrick

Ja, sehe meine bearbeitete Antwort für die Verwendung mit einem einfachen Array (wobei die Option 'value' die gleiche wie der angezeigte Name ist). – inostia

Ihr ist ein Array mit Car Names.Meins ist ein anderes Format, das ich von der Datenbank bekomme. Können Sie mir bitte sagen, wie Sie dieses Array von Objekten in eine Arraylist konvertieren können? – Patrick

Da Sie nur die Autos Modelle in der Datenbank gespeichert sind, können Sie sie abrufen und dann ein neues Array im Inneren die Typen setzen machen wie folgt:

(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>

Hinweis: Ich habe ngOptions Richtlinie verwendet, die ein MUST für <select> verwendet werden, nicht ngRepeat.

Ich hoffe es hilft.

Quelle

2016-08-01 21:46:56 developer033

Drop-Down-Wert für SELECT erhalten von db statt bei UI von hartzucodieren (AngularJS)

Antwort

Verwandte Themen