angularjs – 如何在角度js中显示相关的选择框选项

发布时间：2020-12-17 10:20:39 所属栏目：安全来源：网络整理

导读：我有一个表单,我希望有两个选择框,以便在其中一个选项框中根据另一个选择框的当前值显示/隐藏某些选项. 例如 Select box X Options :ABSelect box Y Options :1 // shows only when A is selected in Select box X2 // A3 // A4 // shows only when B is sel

我有一个表单,我希望有两个选择框,以便在其中一个选项框中根据另一个选择框的当前值显示/隐藏某些选项.

例如

Select box X Options :
A
B

Select box Y Options :

1 // shows only when A is selected in Select box X
2 // A
3 // A
4 // shows only when B is selected in Select box X
5 // B
6 // B

请帮忙.

设置此选项的最简单方法是简单地使次要集合依赖于第一个集合的选择.您可以通过多种方式执行此操作,但只需更换绑定的集合即可.

一个简单的例子：

(function() {
  'use strict';

  function InputController() {
    var secondary = {
        A: [1,2,3],B: [3,4,5]
      },vm = this;

    vm.primary = ['A','B'];
    vm.selectedPrimary = vm.primary[0];

    vm.onPrimaryChange = function() {
      vm.secondary = secondary[vm.selectedPrimary];
    };
  }

  angular.module('inputs',[])
    .controller('InputCtrl',InputController);

}());

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<div class="container" ng-app="inputs" ng-controller="InputCtrl as ctrl">
  <div class="row">
    <div class="col-xs-6">
      <h3>Primary</h3>
      <select class="form-control" ng-model="ctrl.selectedPrimary" ng-options="item for item in ctrl.primary" ng-change="ctrl.onPrimaryChange()"></select>
    </div>
    <div class="col-xs-6">
      <h3>Secondary</h3>
      <select class="form-control" ng-model="ctrl.selectedSecondary" ng-options="item for item in ctrl.secondary"></select>
    </div>
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!