Angular:根据从下拉菜单中选择的选项显示 div 内容(ng-show/ng-switch) [英] Angular: Show div content depending on which option chosen from drop down menu (ng-show/ng-switch)

问题描述

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

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

谁能帮助我或让我朝着正确的方向前进?谢谢.

JSFiddle 链接:http://jsfiddle.net/BootstrapOrBust/kw3qgL3f/

<select class="form-control"><option>选择地点</option><option value="DC">DC</option><option value="NY">NY</option></选择></节>.........<div class="DC"><table class="table"><头><tr><th>位置</th></tr></thead><tr><td><a href="#">Metro</a></td></tr><tr><td><a href="#">Capital</a></td></tr></tbody>

<div class="NY"><table class="table"><头><tr><th>位置</th></tr></thead><tr><td><a href="#">地铁</a></td></tr><tr><td><a href="#">洋基队</a></td></tr></tbody>

解决方案

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

首先 - 你在某处有 ng-app 以便 angular 可以启动.

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

当使用 select 时，如果你使用 ng-options 而不是自己列出选项，你会为自己省去很多麻烦，唯一的例外是选择one" 选项 - 将其作为占位符放入:

<option value="">选择一个</option></选择>$scope.places = [{缩写:'NY'，名称:'纽约'}，{缩写:'DC'，名称:'哥伦比亚特区'}];
此时您可以:
 
<div ng-switch-when="DC">...
<div ng-switch-when="NY">...
然而，我实际上可能会这样做:http://jsfiddle.net/kw3qgL3f/4/
<select ng-model="selectedPlace" class="form-control" ng-options="place as place.name for place in place"><option value="">选择一个</option></选择><table ng-if="selectedPlace" class="table"><头><tr><th>位置</th></tr></thead><tr ng-repeat="property in selectedPlace.properties"><td><a href="#">{{property}}</a></td></tr></tbody></节>$scope.places = [{缩写:'NY'，名称:'纽约'，属性:['Subway'，'Yankees']}，{缩写:'DC'，名称:'哥伦比亚特区'，属性:['Metro'，'Captial']}];
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>

解决方案
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']}
];


                        
这篇关于Angular:根据从下拉菜单中选择的选项显示 div 内容(ng-show/ng-switch)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆