从数据库，而不是在用户界面硬编码的选择获取下拉值（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）

回答

相关问题