Show Hide Divs based on dropdown selection

Question

I need your help. I've resolved my issue partially but not able to figure out things to make it dynamically.

Requirements: I've two Panels which will only appear based upon selection of dropdown list values

Panel Names are : Panel_1 and Panel_2 Dropdown list values: Panel1 and Panel2

My code which is working fine is as follows:

code for dropdown list (hard coded):

<select name="type" ng-model="dataparameters.type" ng-dropdown required ng-change="SelectDDL()">

                                                        <option ng-option value="Panel 1">Panel 1</option>
                                                        <option ng-option value="Panel 2">Panel 2</option>
                                                    </select>

Code For Panels:

<div class="panel panel-default" style="width:650px" id="P1" ng-if="dataparameters.type == 'Panel 1'">
                    <div class="panel-heading">
                          Panel_1
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel1 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P1" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" style="width:650px" id="P2" ng-if="dataparameters.type == 'Panel 2'">
                    <div class="panel-heading">
                            Panel_2
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel2 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P2" />
                            </div>
                        </div>
                    </div>
                </div>

Angular.JS file code:

var application = angular.module('AddEditComponentApp', []);

application.controller('addeditcomponentcontroller', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
    $scope.Selected_DataParameters_Add = {}
 $scope.SelectDDL = function () {

        }
}]);

Here we can see the dropdown list is hardcoded. I've filled my dropdown list dynamically from the database but after that panel visibility is not working.

Code to fill dropdown list is as follows:

 <select id="Selected_DataParameters_Add" ng-model="$scope.Selected_DataParameters_Add" ng-options="dp.Data_Parameter_Name for dp in DataParameters" ng-dropdown required ng-change="Checked()">

                                                        <option ng-option value="">Select Data Fields</option>


                                                    </select>

I think the only problem is I'm not able to understand how to fill values dynamically to ng-option value=""

you can check this [answer](https://stackoverflow.com/questions/18202106/ng-options-with-simple-array-init) it tries also to create and use the ng-option — Amr Alaa, Nov 19 '17 at 11:28
I've reviewed that answer but that doesn't work for me. See my code is working fine when I'm populating the dropdown list with hard code value. But my actuall requirement is to fill dropdown list with database, which I've successfully completed. But after populating the dropdown list dynamically, panel visibility is not working based on selection of dropdown list values. — Shalabh Saxena, Nov 19 '17 at 11:37

score 0 · Answer 1 · answered Nov 19 '17 at 12:28

After spending more time on code, I've fixed my issue. Instead of using 'ng-if' this can be fixed by 'ng-show' under div tab.

I've replaced following piece of code and now it's working fine for me.

Code ng-if="dataparameters.type == 'Panel 1'" replaced with ng-show="$scope.Selected_DataParameters_Add.Data_Parameter_Name=='Panel 1'"

So complete code change is as follows:

<div class="panel panel-default" style="width:650px" id="P1" ng-show="$scope.Selected_DataParameters_Add.Data_Parameter_Name=='Panel 1'">
                    <div class="panel-heading">
                          Panel_1
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel1 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P1" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" style="width:650px" id="P2" ng-show="$scope.Selected_DataParameters_Add.Data_Parameter_Name=='Panel 2'">
                    <div class="panel-heading">
                            Panel_2
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel2 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P2" />
                            </div>
                        </div>
                    </div>
                </div>

Show Hide Divs based on dropdown selection

1 Answers1