從數據庫，而不是在用戶界面硬編碼的選擇獲取下拉值（Angularjs）

我有以下的下拉列表中選擇HTML標籤從數據庫，而不是在用戶界面硬編碼的選擇獲取下拉值（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>

按照上面的代碼，這是笏它，我們有一個下拉列表選擇汽車。它是寶馬或奧迪。

根據此選擇，將顯示模型下拉菜單。例如，如果我們在第一個下拉列表中選擇了奧迪轎車，那麼奧迪i345和奧迪體育將作爲'模型'字段中的下拉菜單顯示出來。

同樣，如果我們選擇寶馬，其他選項將顯示。

現在我打算將Car數據和Model數據一起放入DB中。一旦加載頁面，數據將被檢索並顯示給用戶'Car'部分。一旦選擇了汽車，根據汽車的價值，其相應的型號將在模型部分更新。

我可以從後端獲取數據到前端。我想知道如何動態顯示這些值，而不是像我在這裏完成的硬編碼。

我對汽車數據庫有以下響應。

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

來源

2016-08-01 Patrick

那麼，你的問題有點不清楚..你如何從你的數據庫中獲取物品？ – developer033

@ developer033-現在在問題中編輯ajax調用的響應。這隻適用於汽車下拉 – Patrick

您需要一個包含汽車名稱的數組，例如：

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

然後你可以這樣做：

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

我會建議作出params.CarModel用鑰匙作爲CarNames的對象，價值與汽車類似上面的選項數組。然後，你可以這樣做：因爲你只有汽車模型存儲在數據庫中

<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' : [...] 
}

來源

2016-08-01 21:03:34 inostia

@inostia-我已經編輯了問題，我從汽車下拉列表中獲取數據庫的值。我可以直接使用ng-repeat從後端分配這個響應，如上所述 – Patrick

是的，看到我的編輯答案用於簡單數組（其中選項'value'與顯示的名稱相同）。 – inostia

你的汽車名稱是一個數組。我是從數據庫中獲得的不同格式。你能告訴我如何將這個對象數組轉換成數組列表嗎？ – Patrick

，你可以檢索它們，然後作出新的陣列把它裏面的類型如下：

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

注：我用ngOptions指令，其中之一MUST用於<select>，不ngRepeat。

我希望它有幫助。

來源

2016-08-01 21:46:56 developer033

從數據庫，而不是在用戶界面硬編碼的選擇獲取下拉值（Angularjs）

回答

相關問題