使用 AngularJS 在第一个 Select 标签的基础上填充第二个 Select 标签？

Question

我正在使用 UI-Bootstrap，所以我可以同时使用它们 Angular 和 bootstrap。我想从 "controllerCountries" 控制器具有的 select 标签访问值，并将该值用作参数来填充 select "selectedServices"。我想这样做是因为程序的逻辑是，当我在 select 标签中选择国家列表中的一个国家时，使用该值填充另一个 select 标签。

我的 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" 的值并将该值记录在控制台上，仅此而已。而且，如您所见，我用第一个对象填充 select，但我希望它们是动态的。谁能帮帮我。如果您发现我的代码有误，欢迎您修复它。

问候和感谢。

HTML view

Answer 1

首先，您不需要 $watch，您可以使用 ng-change 在 select 值 (ng-model) 更改时触发回调。你可以在那里写下你的 if 语句。

其次，不要在 select 上使用 ng-controller，您有 ng-options 可以动态地将嵌套的 <option> 元素放置在 <select> 中。

最后，如果您想使用 select 从 select 数字 1 编辑的值填充 select 数字 2，只需在 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 可能看起来像这样

<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"];

使用 AngularJS 在第一个 Select 标签的基础上填充第二个 Select 标签？

Fill second Select tag base on the first Select tag using AngularJS?

javascript

html

angularjs

angular-ui-bootstrap

angular-controller