Angular: 根据2级下拉菜单显示div内容

Question

我想要一个网页的构造如下：应该有2个下拉菜单，其中第二个下拉菜单依赖于第一个下拉菜单（见下文）。此外，应该有一个 div 部分，根据两个下拉菜单的输入显示一些内容。

例如：

下拉菜单 1：可用选项有 "A" 和 "B"

下拉菜单 2：可用选项有

如果在下拉菜单 1 中选择了 "A"，则可用选项为 "DC" 和 "NY"
如果在下拉菜单 1 中选择了 "B"，则可用选项为 "B_DC" 和 "B_NY"

现在，根据下拉菜单中的输入，div 部分中应该会显示某种输出（取决于输入）。例如，如果选择 "B" 和 "B_NY"，则 div 部分可能包含消息“选择 "B" 和 "B_NY"”。或者，如果例如选择了 "A" 和 "DC"，则 div 部分可能包含一个按钮（我选择这个例子只是为了强调内容不仅仅是一般的文本万一这很重要）。

注： Whosebug 上已经有一个非常相似的例子：

这个问题与我上面的问题相同（我也相应地选择了示例）- 唯一的区别是只有一个下拉菜单，而不是两个。该线程中提供的解决方案也可以在 Plunker 上找到：

http://plnkr.co/edit/ziaxHOj53J6sePf6y6Qf?p=preview

我希望这个其他问题能让所有想帮助我解决问题的人更容易。

提前致谢！

Answer 1

举个例子：

<select class="form-control" ng-model="places1">
  <option>Choose Place</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<select class="form-control" ng-model="places2">
  <option>Choose Place</option>
  <option value="DC" ng-if="places1 == 'A'">DC</option>
  <option value="NY" ng-if="places1 == 'A'">NY</option>
  <option value="B_DC" ng-if="places1 == 'B'">B_DC</option>
  <option value="B_NY" ng-if="places1 == 'B'">B_NY</option>
</select>

<div ng-if="places1 == 'A' && places2 == 'DC'">A => DC</div>
<div ng-if="places1 == 'A' && places2 == 'NY'">A => NY</div>
<div ng-if="places1 == 'B' && places2 == 'B_DC'">B => B_DC</div>
<div ng-if="places1 == 'B' && places2 == 'B_NY'">B => B_NY</div>

工作示例：http://plnkr.co/edit/dx3A2GuymtswwEdJHotW?p=preview

Angular: 根据2级下拉菜单显示div内容

Angular: Show div content depending on 2 stage drop down menu

html

javascript

angularjs

angular-ngmodel