Question

32

Angular: Show div content depending on which option chosen from drop down menu (ng-show/ng-switch)

rated 0 times [ 33] [ 1] / answers: 1 / hits: 7135 / 10 Years ago, wed, october 15, 2014, 12:00:00

So I'm completely new to front end (angular, bootsrap, etc), but I have here a JSFiddle link that I created, and what I am trying to do is basically if someone chooses the option VA in the drop-down menu, I want to use the appropriate ng (switch or show), and show the div class with the same name, in this case the div class=VA

If they choose NY, I want it to show the div-class=NY, and not the VA div (in my example I only have two options, but I will have around varying options in my actual program (could be ~10)

Can anyone help me or put me in the right direction? Thanks.

JSFiddle link: http://jsfiddle.net/BootstrapOrBust/kw3qgL3f/

<section ng-controller=Ctrl as loc>   

    <select class=form-control>



        <option>Choose Place</option>

        <option value=DC>DC</option>

        <option value=NY>NY</option>

    </select>

</section>



...

...

...



 <div class=DC>

     <table class=table>

         <thead>

             <tr>

                 <th>Location</th>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td><a href=#>Metro</a></td>

             </tr>

             <tr>

                 <td><a href=#>Capital</a></td>

             </tr>

         </tbody>

     </table>

</div>



 <div class=NY>

     <table class=table>

         <thead>

             <tr>

                 <th>Location</th>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td><a href=#>Subway</a></td>

             </tr>

             <tr>

                 <td><a href=#>Yankees</a></td>

             </tr>

         </tbody>

     </table>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leilanichasel

Add To Favorites

Follow

Total Points: 224

Total Questions: 112

Total Answers: 94

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

answered 10 Years ago deonkalvinw · Accepted Answer

http://jsfiddle.net/kw3qgL3f/3/

First off - you have have ng-app somewhere so angular can start up.

<section ng-app=test ng-controller=Ctrl as loc>

Second, everything that the controller controls has to be INSIDE the element with ng-controller, so we move your </section> below everything else.

When using select, you'll save yourself a lot of headache if you use ng-options instead of listing the options yourself, the one exception is the choose one option - put that in as the placeholder:

<select ng-model=showLoc class=form-control ng-options=place.abbreviation as place.name for place in places>                                                                    

    <option value=>Choose One</option>

</select>



$scope.places = [

     { abbreviation:'NY', name: 'New York'}, 

     {abbreviation: 'DC', name:'District of Columbia'}

];

At which point you can do:

 <div ng-switch=showLoc>

     <div ng-switch-when=DC>

         ...

     </div>

     <div ng-switch-when=NY>

         ...

     </div>

 </div>

However, I would actually probably do it like this:
http://jsfiddle.net/kw3qgL3f/4/

<section ng-app=test ng-controller=Ctrl as loc> 

  <select ng-model=selectedPlace class=form-control ng-options=place as place.name for place in places>                                                                    

    <option value=>Choose One</option>

  </select>



  <table ng-if=selectedPlace class=table>

     <thead>

         <tr>

             <th>Location</th>

         </tr>

     </thead>

     <tbody>

         <tr ng-repeat=property in selectedPlace.properties>

             <td><a href=#>{{property}}</a></td>

         </tr>

     </tbody>

   </table>

</section>



$scope.places = [

    { abbreviation:'NY', name: 'New York', properties: ['Subway', 'Yankees']},

    {abbreviation: 'DC', name:'District of Columbia', properties: ['Metro', 'Captial']}

];