如何使用 angularjs ng-options 和 ng-model 使用严格设置所选选项?
How do I set selected option using angularjs ng-options and ng-model using a strict?
一切都很好,我在模型中设置了默认值,但似乎只是不想将其用作 select 元素中的默认选项。如何使模型达到 select 相应的语言 iso 值?另外,如何避免将空选项添加到 select?
示例数据:
// list of languages
[
{"iso":"abk","language":"Abkhazian"},
{"iso":"aar","language":"Afar"},
{"iso":"afr","language":"Afrikaans"},
...
]
// location object containing the property for the language value
{
"id":"516",
"site":"Al Seela",
"start_utc":"03:00:00",
"end_utc":"06:00:00",
...
"lang_iso":"eng",
"language":"English"
}
标记:
<div ng-controller="StationListController as stationList" ng-init="init()">
...
<div ng-repeat="location in station.locations" class="panel panel-default">
...
<select class="form-control" id="{{'locationLang-' + location.id}}" ng-model="location.lang_iso" ng-options="lang.iso as lang.language for lang in locLanguages track by lang.iso"></select>
JS:
$scope.init = function () {
$http.get($scope.ajaxurl + '?_mode=languages&_task=list').success(function(data, success) {
$scope.locLanguages = data;
}).error(function(error) {});
};
结果:
<select ng-options="lang.iso as lang.language for lang in locLanguages track by lang.iso" ng-model="location.lang_iso" id="locationLang-844" class="form-control ng-pristine ng-valid ng-touched">
<option value="?" selected="selected"></option>
<option value="abk" label="Abkhazian">Abkhazian</option>
<option value="aar" label="Afar">Afar</option>
<option value="afr" label="Afrikaans">Afrikaans</option>
...
</select>
解决空选项问题的唯一方法是在控制器中分配一个默认值。现在只使用第一个值是非常标准的,所以只需将 $scope.init
更新为:
$scope.init = function () {
$http.get($scope.ajaxurl + '?_mode=languages&_task=list').success(function(data, success) {
$scope.locLanguages = data;
$scope.location.lang_iso = {"iso":"abk","language":"Abkhazian"}; // or perhaps the entire object
}).error(function(error) {});
};
一切都很好,我在模型中设置了默认值,但似乎只是不想将其用作 select 元素中的默认选项。如何使模型达到 select 相应的语言 iso 值?另外,如何避免将空选项添加到 select?
示例数据:
// list of languages
[
{"iso":"abk","language":"Abkhazian"},
{"iso":"aar","language":"Afar"},
{"iso":"afr","language":"Afrikaans"},
...
]
// location object containing the property for the language value
{
"id":"516",
"site":"Al Seela",
"start_utc":"03:00:00",
"end_utc":"06:00:00",
...
"lang_iso":"eng",
"language":"English"
}
标记:
<div ng-controller="StationListController as stationList" ng-init="init()">
...
<div ng-repeat="location in station.locations" class="panel panel-default">
...
<select class="form-control" id="{{'locationLang-' + location.id}}" ng-model="location.lang_iso" ng-options="lang.iso as lang.language for lang in locLanguages track by lang.iso"></select>
JS:
$scope.init = function () {
$http.get($scope.ajaxurl + '?_mode=languages&_task=list').success(function(data, success) {
$scope.locLanguages = data;
}).error(function(error) {});
};
结果:
<select ng-options="lang.iso as lang.language for lang in locLanguages track by lang.iso" ng-model="location.lang_iso" id="locationLang-844" class="form-control ng-pristine ng-valid ng-touched">
<option value="?" selected="selected"></option>
<option value="abk" label="Abkhazian">Abkhazian</option>
<option value="aar" label="Afar">Afar</option>
<option value="afr" label="Afrikaans">Afrikaans</option>
...
</select>
解决空选项问题的唯一方法是在控制器中分配一个默认值。现在只使用第一个值是非常标准的,所以只需将 $scope.init
更新为:
$scope.init = function () {
$http.get($scope.ajaxurl + '?_mode=languages&_task=list').success(function(data, success) {
$scope.locLanguages = data;
$scope.location.lang_iso = {"iso":"abk","language":"Abkhazian"}; // or perhaps the entire object
}).error(function(error) {});
};