![](/img/trans.png)
[英]Filtering AngularJS By First Letter Using <select></select> html tag
[英]Fill second Select tag base on the first Select tag using AngularJS?
我正在使用UI-Bootstrap,因此可以同時使用Angular和bootstrap。 我想從“ controllerCountries”控制器具有的選擇標記中訪問值,並將該值用作填充選擇“ selectedServices”的參數。 我要這樣做是因為程序的邏輯將是,當我在一個選擇標記中選擇一個國家列表中的一個國家時,請使用該值填充另一個選擇標記。
我的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”的值並將其記錄在控制台上,僅此而已。 而且,如您所見,我將第一個對象填充到選擇對象中,但我希望它們具有動態效果。 誰能幫我。 如果您發現我的代碼有誤,歡迎您修復它。
問候和感謝。
首先,您不需要$watch
,可以ng-change
選擇值(ng-model)時使用ng-change
觸發回調。 您可以在其中編寫if
語句。
其次,不要在SELECT上使用ng-controller
,您可以使用ng-options
將嵌套的<option>
元素動態放置在<select>
。
最后,如果您要使用從選擇數字1中選擇的值來填充選擇數字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 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"];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.