Angular: Show Div Content Depending On Which Option Chosen From Drop Down Menu (ng-show/ng-switch)

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 '

Solution 1:

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

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

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

<divng-switch="showLoc"><divng-switch-when="DC">
         ...
     </div><divng-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"> 
  <selectng-model="selectedPlace"class="form-control"ng-options="place as place.name for place in places"><optionvalue="">Choose One</option></select><tableng-if="selectedPlace"class="table"><thead><tr><th>Location</th></tr></thead><tbody><trng-repeat="property in selectedPlace.properties"><td><ahref="#">{{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']}
];

Solution 2:

here is the plunker i create a demo demo

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