使用AngularJS根據選擇值顯示div

我正在嘗試使用HTML select元素的值來顯示或隱藏某些使用AngularJS的div標記。這裏是我的代碼：使用AngularJS根據選擇值顯示div

<body ng-app="kiosk" id="ng-app" > 
    <div class="page" ng-controller="kiosk-controller" ng-cloak="true"> 
     <section class="signin"> 

     <div class="intro"> 
      <h1 id="service-desk-name">{{servicedeskname}}</h1><br></br> 
      <h4 id="welcome">{{welcome}}</h4> 
     </div> 

     <hr></hr> 

     <form id="form" name="form"> 

      <div> 
       <label>Do you have an ID?</label><br></br> 
       <select type="select" 
        ng-model="user.affiliated" 
        ng-required="true" 
        ng-options="opt as opt.name for opt in affiliate.affiliateOptions"> 
        <option value="">--Select an answer--</option> 
       </select> 
      </div> 

      <div ng-switch="user.affiliated"> 

      <div ng-switch-when="Yes"> 
       <!--><--> 
      </div> 
      <div ng-switch-when="No"> 
       <!--><--> 
      </div> 

      </div>

這裏是JavaScript代碼段：

var kiosk = angular.module('kiosk',[]); 

kiosk.controller('kiosk-controller', ['$scope', function($scope, $user) { 
    $scope.servicedeskname = 'Service Desk'; 
    $scope.welcome = 'Please sign in and a consultant will be with you shortly.'; 

    $scope.affiliate = {affiliateOptions:[]}; 
    $scope.affiliate.affiliateOptions = [ 
     { name: 'Yes' }, 
     { name: 'No' } 
    ]; 
/*other stuff*/ 
};

我想不出用ng指令引用的HTML標籤中選擇選項的正確方法。除非不是很清楚，否則如果選擇值爲「是」，則希望能夠顯示一個div，如果選擇值爲「否」，則顯示另一個div。

來源

2016-05-22 UnworthyToast

我相信你正在尋找ng-show和ng-hide。

  <div ng-show="user.affiliated === 'Yes'"></div> 
      <div ng-show="user.affiliated === 'No'"></div>

，試着改變這一行這樣的：

  ng-options="opt.name as opt.name for opt in affiliate.affiliateOptions">

來源

2016-05-22 21:35:01 itamar

是的，我也嘗試過使用它。我認爲問題在於，我不知道在左側使用什麼或者在右側使用什麼來表達要訪問我想測試的內容。我會再試一次，看看我是否做錯了什麼。 – UnworthyToast

它仍然無法正常工作。頁面加載時沒有顯示div，也無論我點擊哪個選項，它們都保持隱形狀態。 – UnworthyToast

@UnworthyToast ng-options語句中的第一件事是

使用AngularJS根據選擇值顯示div

回答