角度:根据从下拉菜单(ng-show/ng-switch)中选择的选项显示div内容 [英] Angular: Show div content depending on which option chosen from drop down menu (ng-show/ng-switch)
问题描述
因此,我对前端(角度,bootsrap等)完全陌生,但是我在这里创建了一个JSFiddle链接,而我想做的基本上是如果有人选择了下拉菜单中,我想使用适当的ng(切换或显示),并显示具有相同名称的div类,在这种情况下,该类为div class ="VA"
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"
如果他们选择NY,我希望它显示div-class ="NY",而不是VA div(在我的示例中,我只有两个选项,但是在我的实际程序中会有很多不同的选项(可以大约是10)
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链接: http://jsfiddle.net/BootstrapOrBust/kw3qgL3f/
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/
首先-您在某个地方有ng-app
,这样角度就可以启动.
First off - you have have ng-app
somewhere so angular can start up.
<section ng-app="test" ng-controller="Ctrl as loc">
第二,控制器控制的所有内容都必须位于ng-controller
元素的内部,因此我们将</section>
移至其他所有内容下方.
Second, everything that the controller controls has to be INSIDE the element with ng-controller
, so we move your </section>
below everything else.
使用select
时,如果您使用ng-options
而不是自己列出选项,将省去很多麻烦,唯一的例外是选择一个"选项-将其用作占位符:
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>
但是,我实际上可能会这样做: http://jsfiddle.net/kw3qgL3f/4/
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']}
];
这篇关于角度:根据从下拉菜单(ng-show/ng-switch)中选择的选项显示div内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!