如何在Angular JS中显示依赖选择框选项 [英] How to show dependent select boxes options in angular js

问题描述

我有一个表单，我想有两个选择框，以便其中一个选择框可以基于另一个选择框的当前值显示/隐藏.

I have a form and I want to have two select boxes so that in one of them certain options would show/hide based on the current value of another select box.

例如

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

请帮助.

推荐答案

设置此方法最简单的方法是简单地使辅助集合依赖于第一个集合的选择.您可以通过多种方法来执行此操作，但是最好换掉绑定的集合是您的最佳选择.

The easiest way to set this up is to simply make the secondary collection dependent on the selection of the first one. You can do this any number of ways, but simply swapping out the collection that is bound is your best bet.

一个简单的例子:

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

这篇关于如何在Angular JS中显示依赖选择框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！