I have a select tag (to be used for country selection) which I want to prefill with options using a directive:
我有一个选择标记(用于国家选择),我想使用指令预先填充选项:
<select class="countryselect" required ng-model="cust.country"></select>
My directive goes like
我的指示如下
return {
restrict : "C",
link: function postLink(scope, iElement, iAttrs) {
var countries = [
["AND","AD - Andorra","AD"],
["UAE","AE - Vereinigte Arabische Emirate","AE"]
... //loop array and generate opt elements
iElement.context.appendChild(opt);
}
}
I am able to fill the select with additional options, but the ng-model binding does not work. Even if cust.country has a value (e.g. "UAE"), the option is not selected.
我可以使用其他选项填充选择,但ng-model绑定不起作用。即使cust.country具有值(例如“UAE”),也不选择该选项。
How to make the select display the value of cust.country? If think I have some timing problem here.
如何使select显示cust.country的值?如果认为我在这里有一些时间问题。
1 个解决方案
#1
13
You can use directive from Angular JS:
你可以使用Angular JS的指令:
Markup:
标记:
<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>
Script:
脚本:
app.controller('MainCtrl', function($scope) {
$scope.countries = [
{name:'Vereinigte Arabische Emirate', value:'AE'},
{name:'Andorra', value:'AD'},
];
$scope.country = $scope.countries[1];
});
Check the docs of select: Angular Select
检查选择:Angular Select的文档
EDIT WITH DIRECTIVE
编辑与指令
Directive:
指示:
app.directive('sel', function () {
return {
template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>',
restrict: 'E',
scope: {
selectedValue: '='
},
link: function (scope, elem, attrs) {
scope.countries = [{
name: 'Vereinigte Arabische Emirate',
value: 'AE'
}, {
name: 'Andorra',
value: 'AD'
}, ];
scope.selectedValue = scope.countries[1];
}
};
});
Main controller:
主控制器:
app.controller('MainCtrl', function($scope) {
$scope.country={};
})
Markup:
标记:
<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>
Working Example: EXAMPLE
工作实例:示例
#1
13
You can use directive from Angular JS:
你可以使用Angular JS的指令:
Markup:
标记:
<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>
Script:
脚本:
app.controller('MainCtrl', function($scope) {
$scope.countries = [
{name:'Vereinigte Arabische Emirate', value:'AE'},
{name:'Andorra', value:'AD'},
];
$scope.country = $scope.countries[1];
});
Check the docs of select: Angular Select
检查选择:Angular Select的文档
EDIT WITH DIRECTIVE
编辑与指令
Directive:
指示:
app.directive('sel', function () {
return {
template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>',
restrict: 'E',
scope: {
selectedValue: '='
},
link: function (scope, elem, attrs) {
scope.countries = [{
name: 'Vereinigte Arabische Emirate',
value: 'AE'
}, {
name: 'Andorra',
value: 'AD'
}, ];
scope.selectedValue = scope.countries[1];
}
};
});
Main controller:
主控制器:
app.controller('MainCtrl', function($scope) {
$scope.country={};
})
Markup:
标记:
<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>
Working Example: EXAMPLE
工作实例:示例