Javascript 角度：根据从下拉菜单中选择的选项显示div内容（ng显示/ng开关）

所以我对前端（angular、bootsrap等）是完全陌生的，但这里有一个我创建的JSFIDLE链接，我试图做的基本上是，如果有人在下拉菜单中选择选项“VA”，我想使用适当的ng（switch或show），并用相同的名称显示div类，在本例中为div class=“VA”

如果他们选择NY，我希望它显示div class=“NY”，而不是VA div（在我的示例中，我只有两个选项，但在我的实际程序中，我将有大约10个不同的选项）

有人能帮我或帮我找到正确的方向吗？谢谢

JSIDLE链接：

选择地点
直流
纽约
...
...
...
位置
位置

这是我创建的演示版

您可以将

ng show

与所选的

select

首先-你有

ng应用程序

可以启动的地方

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

此时，您可以执行以下操作：

 <div ng-switch="showLoc">
     <div ng-switch-when="DC">
         ...
     </div>
     <div ng-switch-when="NY">
         ...
     </div>
 </div>

...
...

然而，我实际上可能会这样做：

选一个
位置
$scope.places=[
{缩写：'NY'，名称：'New York'，物业：['Subway'，'Yankees']}，
{缩写：'DC'，名称：'District of Columbia'，属性：['Metro'，'Capital']}
];

+1非常好，我正要写一篇关于如何更好地利用angular的评论，但你已经说了。通常最好在答案中显示一些相关代码，而不仅仅是外部链接。每当你发现自己在重复某件事时（在你的例子中有很多标记），有99%的几率你做得不对，你可以优化它。看看Dave的答案，它应该会给你一些想法。

<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'}
];

 <div ng-switch="showLoc">
     <div ng-switch-when="DC">
         ...
     </div>
     <div ng-switch-when="NY">
         ...
     </div>
 </div>

<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']}
];