how to show/hide div based on drop down selection using angular?

Question

i want to show and hide a div based on selection from the drop down , here is my code, this is my html code for dropdown which fetches the values from the "selectItemsFilterCriteria" json structure

<select  ng-model="appointment" ng-change="changeme()"  ng-options="item.name for item in selectItemsFilterCriteria">
                <option ng-option value="" >Filter Criteria</option>
            </select>

this is my changeme() function created inside a controller

$scope.changeme = function() {
    $scope.appointment = $scope.items[0];
  }

this is code for my div that is to be show or hide , right now my code is working on selection of first option from drop down it is showing me the div but the problem is that its not hiding that div on the selection of any other option from the dropdown list, kindly tell me where i m doing wrong??

 <div class="mycontainer"  ng-show=appointment >
            <div class="left-nav">
                <accordion close-others="true">
                    <accordion-group ng-repeat="item in pagedItems[currentPage] |filter:{name:item.name}| orderBy:sortingOrder:reverse">
                        <accordion-heading>
                            <table>
                                <tr class="odd" ng-click="showDataDetail=!showDataDetail" style="cursor: pointer">
                                    <td><p class="lead-name">{{item.name}}</p>
                                        <p class="call-up-icon">{{item.phoneNo}} </p>
                                        <p>Lead Date : 07/02/2015</p></td>
                                    <td><p></p>
                                        <p class="blue-txt">{{item.trade}}</p>
                                        <p class="fl cstm-wdth">GNU09</p>
                                        <p class="fl">{{item.time}}</p>
                                        <div class="cb"></div>

                                    </td>
                                    <td><p>Today</p>
                                        <p>C#SQL</p>
                                        <p class="blue-remark-icon"></p></td>
                                </tr>
                            </table>
                        </accordion-heading>

                        <div>{{item.data}}</div>
                    </accordion-group>
                </accordion>
            </div>
        </div>

items array:

$scope.selectItemsFilterCriteria = [
    {id:1 , name:"Appointments Scheduled"},
    {id:2 , name:"fresh leads"}

  ];

Why you wanted to call the changeMe() function. Model is automatically updated when you change the option. Function call is unnecessary. Can you also provide the details of what is there in items array? — Janaki Sathiyamurthy
– Janaki Sathiyamurthy, Commented Jul 10, 2015 at 9:05
i am new to angular may b i donno whether its required or not , yes i am updating the items array — Anky
– Anky, Commented Jul 10, 2015 at 9:06
Can you provide the data in items array? Btw ng-change function is not needed. — Janaki Sathiyamurthy
– Janaki Sathiyamurthy, Commented Jul 10, 2015 at 9:07
i tried this is simply not working when i clicked fresh leads option then also i am not able to hide the div — Anky
– Anky, Commented Jul 10, 2015 at 9:22

Janaki Sathiyamurthy · Accepted Answer · 2015-07-10 09:10:31Z

0

Basically the problem is with your ng-change function call,

$scope.changeme = function() {
  $scope.appointment = $scope.items[0];
}

You are setting appointment to first value of items array. Hence whenever you change the options, the function sets it back to first option , in turn the div is shown.

Please remove the ng-change function and try.

answered Jul 10, 2015 at 9:10

Janaki Sathiyamurthy

5881 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anky Over a year ago

what should i change in ng-change function?? please specify?

Janaki Sathiyamurthy Over a year ago

Remove the function. It is not needed. Remove it both in the controller and in the template.

Syed Suhail Ahmed · Accepted Answer · 2015-07-10 09:47:30Z

0

Remove the $scope.changeme() function. It is not necessary.

Since you are using ng-model on select whatever option you select will get assigned to the ng-model i.e appointment in your case.

Here is the plunkr example

answered Jul 10, 2015 at 9:47

Syed Suhail Ahmed

6956 silver badges21 bronze badges

2 Comments

Anky Over a year ago

thank you for the example i got your point but the problem i am facing here is of showing or hiding divs i have written it like this: <div class="mycontainer" ng-show=appointment> and it is working fine but how to hide it or show another div when i select another option ??

Syed Suhail Ahmed Over a year ago

You can set a condition for appointment like ng-show="appointment.id==2". This way you can specify when to show or hide div.

Collectives™ on Stack Overflow

how to show/hide div based on drop down selection using angular?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related