Angular：根据从下拉菜单中选择的选项显示 div 内容（ng-show/ng-switch）答案

【问题标题】：Angular: Show div content depending on which option chosen from drop down menu (ng-show/ng-switch)Angular：根据从下拉菜单中选择的选项显示 div 内容（ng-show/ng-switch）
【发布时间】：2014-10-16 02:45:06
【问题描述】：

所以我对前端（角度、引导程序等）完全陌生，但我在这里创建了一个 JSFiddle 链接，我想要做的基本上是如果有人在下拉菜单，我想用合适的ng（切换或显示），并显示同名的div类，在本例中为div class="VA"

如果他们选择 NY，我希望它显示 div-class="NY"，而不是 VA div（在我的示例中，我只有两个选项，但我的实际程序中会有不同的选项（可以是〜10）

任何人都可以帮助我或将我引向正确的方向吗？谢谢。

JSFiddle 链接：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>

【问题讨论】：

每当你发现自己在重复某件事（在你的情况下，有很多标记），有 99% 的机会你做的不是很正确，你可以优化它。看看 Dave 的回答，它应该会给你一些想法。

标签： javascript html angularjs angular-ngmodel

【解决方案1】：

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

首先 - 你在某个地方有 ng-app，所以 Angular 可以启动。

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

其次，控制器控制的所有内容都必须位于带有ng-controller 的元素内，因此我们将您的</section> 移到其他所有内容下方。

在使用select 时，如果您使用ng-options 而不是自己列出选项，您会省去很多麻烦，一个例外是“选择一个”选项 - 将其作为占位符：

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

但是，我实际上可能会这样做： 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']}
];

【讨论】：

+1 非常好，我正要写 OP 评论关于如何更好地使用 Angular，但你都说了。

【解决方案2】：

这是我创建演示的 plunker demo

您可以将ng-show 与select 的选定值一起使用

【讨论】：

在你的答案中显示一些相关的代码通常是好的，而不仅仅是外部链接。