填寫第二個使用AngularJS選擇標籤的第一個選擇標籤？

我正在使用UI-Bootstrap，所以我可以使用它們Angular和Bootstrap。我想訪問「controllerCountries」控制器所具有的選擇標籤的值，並將該值用作參數來填充選擇「selectedServices」。我想這樣做是因爲程序的邏輯是，當我在選擇標記中選擇一個國家列表的國家時，使用該值填充另一個選擇標記。填寫第二個使用AngularJS選擇標籤的第一個選擇標籤？

我的HTML是在這裏：

<div style="margin-top: 15px" class="col-md-6"> 
    <div id="form-pais"class="form-group"> 
     <label class=" control-label">Country:</label> 
     <div class="selectContainer"> 
       <select ng-controller="controllerCountries" class="form-control" id="abvCountry" name="abvCountry" ng-model="countrySelected"> 
        <option value="gt">Guatemala</option> 
        <option value="sl">El Salvador</option> 
        <option value="hn">Honduras</option> 
       </select> 
     </div> 
    </div> 
</div> 
<div style="margin-top: 15px" class="col-md-6"> 
    <div class="form-group"> 
     <label class=" control-label">Services:</label> 
    <div ng-controller="controllerServices" class="selectContainer"> 
     <select class="form-control" id="selectServices"ng-model="servicios" ng-options="y for (x, y) in serviciosgt" text=""> 
     </select> 
    </div>

我的JS文件看起來像這樣：

//Heres the list of services in the objects. I use this to fill the second select. 
app.controller('controllerServices', function($scope) 
{ 
    $scope.serviciosgt = 
    { 
      consMiami : "Consolidación Miami", 
      contCompletosGT: "Contenedores Completos", 
      cargMartConsolidadGT : "Carga Maritima Consolidada", 
      cargAereaRegularGT: "Carga Áerea Regular" 
    }; 

    $scope.serviciosSL = 
    { 
     contCompletosSl : "Contenedores Completos", 
     cargMartConsolidadSl: "Carga Marítima Consolidada", 
     cargAereaRegularSl: "Carga Áerea Regular" 
    }; 

    $scope.serviciosHN = 
    { 
     contCompletosHN : "Contenedores Completos", 
     cargMartConsolidadHN: "Carga Marítima Consolidada", 
     cargAereaRegularHN: "Carga Áerea Regular" 
    }; 
}); 

//Heres the controller to fill. 
app.controller('controllerCountries', function($scope) 
{ 
    $scope.countrySelected =''; 
    $scope.$watch('countrySelected', function() { 
      if($scope.countrySelected=="gt") 
      { 
       console.log("Select GT"); 

      } 
      else if($scope.countrySelected=="sl") 
      { 
       console.log("Select SL"); 
      } 
      else if($scope.countrySelected=="hn") 
      { 
       console.log("Select HN"); 
      } 
    }); 
});

現在我可以訪問的第一個「controllerCountries」的價值和日誌在控制檯上的價值，但多數民衆贊成它。而且，正如你所看到的，我用第一個對象填充選區，但是我想讓他們變成動態的。任何人都可以幫助我。如果你看我的代碼是錯誤的，歡迎你解決它。

問候和感謝。所有的

HTML view

來源

2017-06-16 Freddy Martínez

[動態NG-選項（https://stackoverflow.com/que stions/26518220/angularjs動態-NG選項對鏈接兩個下拉菜單） –

首先，你不需要那麼$watch，您可以使用ng-change火回調時選擇值（NG-模型）被改變。你可以在那裏寫你的if報表。

其次，不要在選擇使用ng-controller，你必須ng-options動態放置<select>內嵌套<option>元素。

最後，如果你想選擇補數2使用你從選擇1號選擇的數值，只是參考當ngChange回調觸發正確的數據

$scope.onCountryChange = function (country) { 
     if(country=="gt") 
     { 
      console.log("Select GT"); 
      $scope.serviciosgt = { ... }; 
     } 
     else if(country=="sl") 
     { 
      console.log("Select SL"); 
      $scope.serviciosgt = { ... }; 
     } 
     else if(country=="hn") 
     { 
      console.log("Select HN"); 
      $scope.serviciosgt = { ... }; 
     } 
};

您的選擇可能看起來像此

<select class="form-control" 
     name="abvCountry" 
     ng-change="onCountryChange(countrySelected)" 
     ng-options="country for country in countries" ng-model="countrySelected"> 
</select>

雖然

$scope.countries = ["gt", "sl", "hn"];

來源

2017-06-18 15:26:59 svarog

填寫第二個使用AngularJS選擇標籤的第一個選擇標籤？

回答

相關問題