从 db 中获取 SELECT 的下拉值，而不是在 UI 中硬编码（Angularjs）答案

【问题标题】：get dropdown value for SELECT from db instead of hardcoding at UI (Angularjs)从 db 中获取 SELECT 的下拉值，而不是在 UI 中硬编码（Angularjs）
【发布时间】：2016-12-06 22:49:34
【问题描述】：

我有以下下拉选择 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>

根据上面的代码，这就是它的作用，我们有一个下拉菜单来选择 Car。要么是宝马，要么是奥迪。

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

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

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

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

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

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

【问题讨论】：

嗯，你的问题有点不清楚..你是如何从你的数据库中获取项目的？
@developer033- 现在在问题中编辑了 ajax 调用的响应。这仅适用于汽车下拉菜单

标签： javascript html angularjs select drop-down-menu

【解决方案1】：

由于您的数据库中只有 汽车模型，您可以检索它们，然后创建一个新数组，将类型放入其中，如下所示：

(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 指令，其中一个必须用于<select>，而不是ngRepeat。

希望对你有帮助。

【讨论】：

【解决方案2】：

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

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

【讨论】：

@inostia- 我已经使用从数据库中为 Car 下拉列表获得的值编辑了问题。我可以使用上面提到的 ng-repeat 直接从后端分配这个响应吗
是的，请参阅我编辑的答案以用于简单数组（其中选项 values 与显示的名称相同）。
Yours 是一个带有汽车名称的数组。我的是一种不同的格式，我从数据库中获得。您能告诉我如何将该对象数组转换为数组列表吗？
类似的东西可以直接使用对象<option ng-repeat="option in carsFromDatabase" value="{{option.Car}}">{{option.Car}}</option>
@inostia- 这是很大的帮助。谢谢。