ngИзменить кучу выпадающих списков

Question

Так что мне нужно полностью изменить группу выпадающих списков, которые отображаются на основе выбора одного выпадающего списка. . Я считаю, что ngChange путь идти об этом, но я не совсем уверен, как переключаться между двумя наборами дивы (или, если это даже самый лучший способ сделать это

Так что у меня это ниспадающее меню:

   <div class="input-group" theme="bootstrap" style=""> 
       <label>Product Type</label> 
       <select class="dropdown-menu scrollable-menu form-control" style="" ng-model="event.etype" ng-change="setOptions()" id="etype"> 
        <option value="" selected disabled>Select a Product</option> 
        <option ng-click="type = 'x'">X</option> 
        <option ng-click="type = 'y'">Y</option> 
        <option ng-click="type = 'z'">Z</option> 
        <option ng-click="type = 'q'">Q</option> 
        <option ng-click="type = 'w'">W</option> 
       </select> 
       </div> 

Если выбор X, мне нужен один набор капель спадов (содержащихся в одной строке), а если что-нибудь еще, мне нужен совершенно другой набор (содержащийся в другом ряду).

Здесь как выглядят выпадающие списки:

     <div class="col-lg-3"> 
          <label>Numbers</label> 
           <ui-select-match placeholder="Select Numbers">{{$item.admin_user.name}}</ui-select-match> 
           <ui-select-choices repeat="a in ams"> {{a.admin_user.name}} </ui-select-choices> 
          </ui-select> 
      </div> 
      </div> 


     <div class="row col-lg-12" id="nonX"> 

      <div class="col-lg-3"> 
       <div class="input-group" theme="bootstrap"> 
        <label>Super Heroes</label> 
        <select class="dropdown-menu scrollable-menu form-control" ng-model="superhero" id="script"> 
         <option value="" selected disabled>Select Superhero</option> 
         <option ng-repeat="superhero in superheroes" ng-value={{superhero}} ng-click="selectHeroe(superhero)">{{superhero.name}}</option> 
        </select> 
       </div> 
      </div> 

      </div> 
      </div> 
     </div> 


     <div class="row col-lg-12" id="noniPad"> 


      <div class="col-lg-3"> 
       <div class="input-group" theme="bootstrap"> 
        <label>Screen</label> 
        <select class="dropdown-menu scrollable-menu form-control" ng-model="event.screen" id="screen"> 
         <option value="" selected disabled>Select Screen</option> 
         <option ng-repeat="screen in screens" ng-value={{screen}} ng-click="selectScreen(screen)">{{screen.name}}</option> 
        </select> 
       </div> 
      </div> 

      <div class="col-lg-3"> 
       <div class="input-group" theme="bootstrap"> 
       <label>Misc Asset</label> 
       <select class="dropdown-menu scrollable-menu form-control" ng-model="event.miscasset" id="miscasset"> 
        <option value="" selected disabled>Select Misc Asset</option> 
        <option ng-repeat="miscasset in miscassets" ng-value={{miscasset}} ng-click="slectMiscAsset(miscasset)">{{miscasset.name}}</option> 
       </select> 
       </div> 
      </div> 

     </div> 


       <div class="row m-b-sm m-t-sm"></div> 
    </div> 

Отдельные выпадающие списки отображаются в разных строках. Поэтому мне понадобится одна строка, чтобы отобразить, если они выберет iPad и одну строку, если они не выберет iPad.

Я хотел бы помочь. Спасибо!

Answer 1

Ваш лучший вариант - установить выпадающие списки каждого из них в зависимости от выбора родителя. Нет необходимости создавать дубликат div для хранения обоих наборов dropdows.

Я удалил все классы css и любую другую разметку, не относящуюся к ng-change, чтобы сделать ее более ясной.

Ваш родитель выпадающий будет выглядеть следующим образом:

<div> 
    <label>Product Type</label> 
    <select ng-model="event.etype" ng-change="setOptions(event.etype)"> 
     <option value="">Select a Product</option> 
     <option ng-repeat="etype in etypes" ng-value="etype" ng-bind="etype"></option> 
    </select> 
</div> 

Обратите особое внимание на том, как setOptions обработчик передается значение нг-модели. Это означает, что когда выбран параметр, он автоматически установит ng-model = "event.etype" в значение этого параметра.

Для поддержки этого поведения в контроллере необходимо предоставить массив типов событий:

$scope.etypes = ['gif', 'photo', 'ipad', 'video', 'print']; 

Затем на вашем методе setOptions вы получите выбранный вариант и фильтровать ваши потомки выпадающие

var options1 = [{ 
    etype: 'ipad', 
    value: '1' 
}, { 
    etype: 'gif', 
    value: '2' 
}]; 

$scope.setOptions = function (etype) { 
    $scope.scripts = options1.filter(function (item) { 
     return item.etype == etype; 
    }); 
}; 

Это означает, что setOptions установит выпадающие списки потомков на основе переданного значения etype. В этом примере я ограничиваю только $ scope.scripts, но вы можете установить столько, сколько необходимо. Как вы видите, options1 - это просто массив, который содержит свойство etype, которое мне нужно отфильтровать.

Наконец на ваших потомков выпадающие вы бы использовали отфильтрованные параметры:

<select ng-model="event.script"> 
    <option value="" selected disabled>Select Script</option> 
    <option ng-repeat="script in scripts" ng-value="script.value" ng-bind="script.value"></option> 
</select> 

Answer 2

Использование ng-hide="event.etype == null || event.etype=='ipad'" и ng-show="event.etype == 'ipad'" на тегах рядных решить мою проблему!