So I'm pletely 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: /

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

So I'm pletely 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/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>

• javascript
• html
• angularjs
• angular-ngmodel

Share Improve this question Follow asked Oct 15, 2014 at 18:27 U.S. Coding Team - BenchwarmerU.S. Coding Team - Benchwarmer 35711 gold badge1212 silver badges3030 bronze badges 1

• Whenever you catch yourself repeating something (a lot of markup, in your case), there is a 99% chance you're not doing it quite right and that you can optimize it. See Dave's answer, it should give you a few ideas. – Shomz Commented Oct 15, 2014 at 18:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

http://jsfiddle/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/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']}
];

here is the plunker i create a demo demo

you can use ng-show with the selected value of the select