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>

根据上面的代码，这是它的确，我们有一个下拉菜单选择Car。它是宝马或奥迪。

根据此选择，将显示“模型”下拉列表。例如，如果我们在第一个下拉列表中选择奥迪汽车，那么奥迪i345和奥迪运动将被显示为“模型”中的下拉列表。字段。

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

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

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

我从汽车数据库得到以下回应。

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

Answer 2

由于您的数据库中只存储了汽车模型，您可以检索它们，然后在其中创建一个新数组，如下所示：

＆＃13;

(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"
        ]
      }
    ];
  }
})();

＆＃13;

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

＆＃13;

注意：我已使用ngOptions指令，其中一个必须用于<select>，而不是ngRepeat

我希望它有所帮助。

从db获取SELECT的下拉值而不是UI（Angularjs）

2 个答案: