ng更改一堆下拉列表

Question

所以我需要完全更改一組下拉列表，這些下拉列表基於一個下拉列表的選擇。我相信ngChange是去它的方式，但我不完全知道如何兩套的div之間切換（或者如果是連這樣做的最好辦法

所以我有這個下拉菜單：

   <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來保存兩組投影。

我刪除了所有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-模型值特別通知。這意味着當選擇一個選項時，它會自動將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，但您可以設置多少個needeed。正如你可以看到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'"解決了我的問題！