javascript - 从数据库中获取 SELECT 的下拉值而不是在 UI 上进行硬编码 (Angularjs)

Question

我有以下下拉选择 HTML 标签

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

按照上面的代码，这就是它所做的，我们有一个下拉菜单来选择汽车。要么是宝马，要么是奥迪。

根据此选择，将显示模型下拉列表。例如，如果我们在第一个下拉列表中选择 Audi for Car，则 Audi i345 和 Audi Sports 将显示为“型号”字段中的下拉列表。

同样，如果我们选择宝马，也会显示其他选项。

现在我打算将汽车数据与模型数据一起放入数据库中。页面加载后，数据将被检索并显示给“汽车”部分的用户。选择汽车后，根据汽车的值(value)，其相应的模型将在模型部分更新。

我可以从后端获取数据到前端。我想知道如何动态显示这些值，而不是像我在这里所做的那样进行硬编码。

我从汽车的数据库中得到以下响应。

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

Answer 1

您需要一个包含汽车名称的数组，例如。

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