如何在角度js中显示依赖选择框选项[关闭]

Question

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

例如

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

请帮忙。

Answer 1

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

一个简单的例子：

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

Answer 2

虽然你还没有尝试过，但我仍然会展示如何使用另一个选择的值来更改一个选择的值，请参阅http://jsfiddle.net/HB7LU/10721/

我采用了两个相似的数组，并在select 中使用ng-options 重复它们

  $scope.values = [{
  id: 1,
  label: 'aLabel',
  subItem: 'abc'
}, {
  id: 2,
  label: 'bLabel',
  subItem: 'pqr'
}];


     $scope.values2 = [{
  id: 1,
  label: 'aLabel',
  subItem: 'abc'
}, {
  id: 2,
  label: 'bLabel',
  subItem: 'pqr'
}];


 <select ng-options="item.label as item.subItem for item in values " ng-model="selected1"></select>


      <select ng-options="item2.label as item2.subItem for item2 in values2 " ng-model="selected2" ng-change='fun()'></select>

现在这里没有技巧了， 你只需调用一个函数 fun 更改 select number2

 $scope.fun=function(){
        $scope.selected1=$scope.selected2;
    },

并将模型select1 更改为select2。

希望这会有所帮助。

Answer 3

好的，这对我有用

var propertiesSearchModule = angular.module('propertiesSearchModule');

    propertiesSearchModule.controller('searchFormController', ['$scope' ,'$rootScope', function($scope, $rootScope) {

        $scope.a = [
            {label:'Sale', value:'sale'},
            {label:'Rent', value:'rent'}
        ];

        $scope.t = {
            residential : {
                label:'Residential', value:'residential',
                uOptions : [
                    {label: 'Villa', value: 'villa'},
                    {label: 'Apartment', value: 'apartment'},
                    {label: 'Duplex', value: 'duplex'},
                    {label: 'Office', value: 'office'}
                ]
            },
            commercial : {
                label:'Commercial', value:'commercial',
                uOptions :[
                    {label: 'Penthouse', value: 'penthouse'},
                    {label: 'Full floor', value: 'full floor'},
                    {label: 'Hotel apartment', value: 'hotel apartment'},
                    {label: 'Warehouse', value: 'warehouse'}
                ]
            }
        }
    }]);

这里是 HTML

<div data-ng-controller="searchFormController">

            <form name="propertiesSearchForm" action="" method="get">

            <select name="t" id="select-type" class="search-select" data-ng-options="v.value as v.label for (x,v) in t" data-ng-model="fields.t">
                <option value="" selected="selected">Types</option>
            </select>


            <select name="u" id="select-unit-type"  data-ng-options="y.value as y.label for y in t[fields.t].uOptions" data-ng-model="fields.u">
                <option value="" selected="selected">Unit Type</option>
            </select>

            </form>

        </div>

灵感来自：http://jsfiddle.net/annavester/Zd6uX/