tonestrike tonestrike - 3 months ago 17
Javascript Question

ngChange a bunch of dropdowns

So I need to entirely change a group of drop downs that appear based on the selection of one dropdown. I believe ngChange is the way to go about it, but I am not entirely sure how to change between two sets of divs (or if that is even the best way of doing it.

So I have this dropdown:

<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="event.etype = 'gif'">GIF Booth</option>
<option ng-click="event.etype = 'photo'">Photo Booth</option>
<option ng-click="event.etype = 'ipad'">iPad</option>
<option ng-click="event.etype = 'video'">Video Booth</option>
<option ng-click="event.etype = 'print'">#Print</option>
</select>
</div>


If the choice is iPad, I need one set of drop downs (contained in one row), and if it is anything else, I need an entirely different set (contained in another row).

Here are how the drop downs look:

<div class="col-lg-3">
<label>Booths</label>
<ui-select multiple ng-model="chosenAM" ng-change="filter('accountManager', chosenAM)" theme="bootstrap" style="width: 300px; font-size: 12px; border: medium none; background-clip; padding-box; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; 0 6px 12px rgba(0,0,0,0.175)">
<ui-select-match placeholder="Select Booths">{{$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="noniPad">

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


<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>App</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.app" id="app">
<option value="" selected disabled>Select App</option>
<option ng-repeat="app in apps" ng-value={{app}} ng-click="selectApp(app)">{{app.name}}</option>
</select>
</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>


The separate drop downs both appear in different rows. So I would need one row to appear if they select iPad and one row to appear if they do not select an iPad.

I would love some help. Thank you!

Answer

Using ng-hide="event.etype == null || event.etype=='ipad'" and ng-show="event.etype == 'ipad'" on the row tags solved my issue!

Comments