2016-05-11 112 views
1

我想爲網頁構造如下:應該有2個下拉菜單,其中第二個下拉菜單取決於第一個下拉菜單(見下文)。另外,還應該有一個div部分,顯示依賴於下拉菜單上的輸入的一些內容。Angular:根據2階段下拉菜單顯示div內容

例如:

下拉菜單1:可用的選項爲 「A」 和 「B」

下拉菜單2:可用的選項是

  • 如果「 A「在下拉菜單1中選擇,則可用選項爲」DC「和」NY「
  • 如果在下拉菜單1中選擇了」B「,則可用選項是」B_DC「和」B_NY「

現在,依賴於下拉菜單中的輸入,應該在div部分中顯示某種輸出(取決於輸入)。例如,如果選擇「B」和「B_NY」,div部分可能包含消息「選項」B「和」B_NY「選擇」。或者,例如,如果選擇了「A」和「DC」,則div部分可能會包含一個按鈕(我選擇此示例只是爲了強調內容不僅僅是一般情況下的文本)。

注: 有一個非常類似的例子已經在計算器:

http://stackoverflow.com/questions/26389562/angular-show-div-content-depending-on-which-option-chosen-from-drop-down-menu/26389852#26389852 

這個問題是相同我上面的問題(我也選擇了相應的例子) - 唯一的區別是隻有一個下拉菜單而不是兩個。在該線程中提出了一種解決方案也可以在Plunker發現:

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

我希望這次的其他問題使得它更容易爲大家誰願意幫助我與我的quesiton。

預先感謝您!

回答

3

拿這個例子:

<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

+0

非常感謝! :)非常簡短,美觀和簡單的解決方案,完全符合我的需求!謝謝! – BJPrim