Как показать зависимые параметры полей выбора в angular js [закрыто]

У меня есть форма, и я хочу иметь два поля выбора, чтобы в одном из них определенные параметры отображались/скрывались на основе текущего значения другого поля выбора.

Эл.г 

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

помогите пожалуйста.

6
angularjs select

3 ответов

самый простой способ настроить это-просто сделать вторичную коллекцию зависимой от выбора первой. Вы можете сделать это любым способом, но просто поменять коллекцию, которая привязана, - ваш лучший выбор.

простой пример:

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

хотя вы ничего не пробовали, я все равно покажу, как вы можете изменить значение выбора, используя значение другого выбора, см. Это 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.

надеюсь, что это помогает.

1

хорошо это сработало для меня 

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/

1