AngularJS- 如何在第一个 select 选项的 selection 上填充第二个 select？

Question

我是 AngularJS 的新手。在我的应用程序中，我有两个 <select>。第二个 select 必须依赖于第一个 select selected 的值 selected。以下是我的控制器数据：

$scope.types=[{type:"Cars"},{type:"Bykes"}];

$scope.Cars= [{"id":1,"CarName":"Hundai"},{"id":2,"CarName":"Maruti"},{"id":3,"CarName":"Toyoto",}];

$scope.Bykes= [{"id":10,"BykeName":"Honda"},{"id":8,"BykeName":"Bajaj"},{"id":9,"BykeName":"TVS"}];

以下是我的HTML：

<div class="col-lg-2 top10">
    <select class="form-control select1" ng-model="selectedType" ng-init="selectedType='Cars'">
        <option ng-repeat="type in types">{{type.type}}</option>
    </select>
</div>

<div class="col-lg-3">
    <select ng-model="vehicle"  class="form-control select2"   >
        <option ng-repeat="car in Cars" value="{{car}}">{{car.CarName}}</option>
    </select>
</div>

实际上我的汽车和自行车数据来自数据库。

现在好像我 select 辆车来自第一 select ，因此只有汽车应该显示在第二个 select 并且如果我 select Bykes only Bykes 应该是秒 select.

显示

请提前帮我this.Thanx。

Answer 1

这是您可以执行的操作，无需修改代码中的许多内容。

您可以使用 ng-if 检查所选车辆类型并相应地显示相应的下拉列表。

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.types = [{
      type: "Cars"
    }, {
      type: "Bykes"
    }];

    $scope.Cars = [{
      "id": 1,
      "CarName": "Hundai"
    }, {
      "id": 2,
      "CarName": "Maruti"
    }, {
      "id": 3,
      "CarName": "Toyoto",
    }];

    $scope.Bykes = [{
      "id": 10,
      "BykeName": "Honda"
    }, {
      "id": 8,
      "BykeName": "Bajaj"
    }, {
      "id": 9,
      "BykeName": "TVS"
    }];

  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController as vm">
    <div class="col-lg-2 top10">
      <select class="form-control select1" ng-model="vm.selectedType" ng-init="vm.selectedType='Cars'">
        <option ng-repeat="type in types">{{type.type}}</option>
      </select>
    </div>

    <div class="col-lg-3" ng-if="vm.selectedType=='Cars'">
      <select ng-model="vehicle" class="form-control select2">
        <option ng-repeat="car in Cars" value="{{car}}">{{car.CarName}}</option>
      </select>
    </div>
    <div class="col-lg-3" ng-if="vm.selectedType=='Bykes'">
      <select ng-model="vehicle" class="form-control select2">
        <option ng-repeat="byke in Bykes" value="{{byke}}">{{byke.BykeName}}</option>
      </select>
    </div>
    <span>
    </span> 
  </div>
</div>

Answer 2

Here the answer

这里

populate 第二个 select 基于第一个 select

的 select 选项

AngularJS- 如何在第一个 select 选项的 selection 上填充第二个 select？

AngularJS- How to populate second select on selection of option from first select?

javascript

html

angularjs

这里