帶有角度的無源下拉菜單

Question

我想引用ng-repeat中的選定項目，然後使用該值確定是否會通過ng-show顯示另一個下拉菜單。

我特別想使用階段值來影響hq是否會顯示在頁面上。讓我知道是否需要澄清任何事情。

這裏是我的代碼：

 <div ng-app="erasmus"> 
     <div class="col-sm-4"> 

     <div ng-controller="erasmusController"> 
     <center><h2>Phase:</h2></center> 
     <center><select id="phase" name="phase"> 
      <option ng-repeat="x in phase track by $index">{{x}}  
     </select></center> 
     </div> 

     </div> 


     <div class="col-sm-4"> 

     <div ng-controller="erasmusController"> 
     <center><h2>Side:</h2></center> 
     <center><select id="side" name="side"> 
      <option ng-repeat="x in side">{{x}} 
     </select></center> 
     </div> 

     </div> 

     <div class="col-sm-4"> 

     <div ng-controller="erasmusController"> 

     <div ng-show="showHQ"> 

     <center><h2 id="hq">Is HQs OOS?:</h2></center> 
     <center><select id="hq" name="hq"> 
      <option ng-repeat="x in hq">{{x}} 
     </select></center> 
     </div> 
     </div> 

     </div> 

     </div> 

     <div class="col-sm-4"> 
     <input type="submit"> 
     </div> 

     </form> 
     </div> 
     </body> 
     <script> 

     var app = angular.module("erasmus",[]); 


     app.controller("erasmusController",function($scope){ 

     $scope.phase = ["Beggining","Middle","End"]; 
     $scope.side = ["Japanese","Allied"]; 

     $scope.showHQ = false; 
     $scope.hq = ["Yes","No"]; 



     }); 

Answer 1

首先，它可能是更好的對您的選擇，而不是ng-repeat使用ng-options。另外，如果您打算將選擇的值用於某物，則可能需要給它一個ng-model。

例如：

<select id="side" name="side" ng-model="sideVal" ng-options="item.value as item.label for item in side"></select>

，因爲你需要確保該選項的值設置爲true或false這個例子可能需要調整。這可能需要您$scope.side陣列是一個涉及多一點（也許對象的數組？即[{name: 'Japanese', value:false}, {name: 'Allied', value:true}]？）

一旦做到這一點，所有你需要做的是設置$scope.showHQ等於新定義的$scope.sideVal（見在選擇的例子中爲ng-model）。這可以經由一個$watch來完成這樣的：

$scope.$watch('sideVal', function(newVal, oldVal){ if(newVal !== oldVal){ $scope.showHQ = newVal;}}); 

這實質上手錶$scope.sideVal並且當它改變（newVal !== oldVal）它設置$scope.showHQ等於$scope.sideVal的

的newVal這應該觸發基於哪個值ng-show被選中。

編輯： 新增工作小提琴：https://jsfiddle.net/rmfg4460/1/

夫婦的事情，你只需要爲每個頁面定義一旦你的控制器，除非你正在做具體的每次實例化它的時間的東西。

我打字速度太快，確實犯了使用等號而不是冒號的錯誤，這已得到糾正。