ngChange a bunch of dropdowns

Question

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="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>

If the choice is X, 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>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>

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 1

Your best option would be to set the dropdowns of each one depending on the parent selection. There's no need to create a duplicate div to hold both sets of dropdows.

I removed all css classes and any other markup not relevant to the ng-change to make it clearer.

Your parent dropdown would look like this:

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

Take special notice of how the setOptions handler is being passed the ng-model value. This means when an option is selected, it'll automatically set ng-model="event.etype" to the value of that option.

To support this behavior in your controller you need to provide the array of event types:

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

Then, on your setOptions method you'll get the selected option and filter your descendant dropdowns

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

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

What this means is that setOptions will set the descendant dropdowns based on the etype value passed in. In this example I'm limiting to $scope.scripts only but you can set as many as needeed. As you can see options1 is just an array which contains the etype property which I need to filter against.

Finally on your descendant dropdowns you would use the filtered options:

<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

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