Is it possible to use ngPluralize inside of a select tag configured with ngOoptions to pluralize the options of the dropdown list?
I currently have the following controller
function Ctrl ($scope) {
$scope.ranges = [1, 2, 3, 4, 5];
$scope.range = $scope.ranges[4];
$scope.$watch('range', function(val) {
console.log('change' + val);
});
};
and the following markup
<div ng-controller="LiveViewerCtrl">
<select ng-model="range"
ng-options="range for range in ranges"
ng-pluralize
count="range"
when="{'1': '1 Minute', 'other': '{} Minutes'}">
</select>
</div>
I also tried to create the options myself using ng-repeat and that worked fine. Unfortunatly the dropdown list had an empty default value and was not preselected although I specified a default value in my controller. If I use the ngOptions approach the preselection works, but the values are not pluralized.
Is it possible to use ngPluralize inside of a select tag configured with ngOoptions to pluralize the options of the dropdown list?
I currently have the following controller
function Ctrl ($scope) {
$scope.ranges = [1, 2, 3, 4, 5];
$scope.range = $scope.ranges[4];
$scope.$watch('range', function(val) {
console.log('change' + val);
});
};
and the following markup
<div ng-controller="LiveViewerCtrl">
<select ng-model="range"
ng-options="range for range in ranges"
ng-pluralize
count="range"
when="{'1': '1 Minute', 'other': '{} Minutes'}">
</select>
</div>
I also tried to create the options myself using ng-repeat and that worked fine. Unfortunatly the dropdown list had an empty default value and was not preselected although I specified a default value in my controller. If I use the ngOptions approach the preselection works, but the values are not pluralized.
Share Improve this question asked Mar 18, 2013 at 7:32 obivandammeobivandamme 5451 gold badge5 silver badges13 bronze badges 2-
2
Nope, it's not going to fly.
ngPluralizeneeded to be set on item with pluralizable text (read<option>), but it's defined onto<select>. The way out is to usengRepeatinstead ofngOptionsplnkr.co/edit/PcY7MVykf10w0AtueBJf – Dmytro Evseev Commented Mar 18, 2013 at 8:38 - Thank you for your answer. As you and @Stewie mentioned, the ng-repeat approach seems to be correct. I just looked at your example and saw the ng-selected directive. This solved my problem with the pre selection perfectly. Thank you guys – obivandamme Commented Mar 19, 2013 at 8:16
1 Answer
Reset to default 9As Dmitry explained, ngPluralize cannot be used with ngOptions, but nothing stops you from using it with ngRepeat:
HTML:
<body ng-controller="AppController">
<select ng-model="selectedRange">
<option value="">Select number ...</option>
<option
ng-repeat="range in ranges"
ng-pluralize
count="range"
when="{1: '{{range}} minute', other: '{{range}} minutes'}"
>{{range}}</option>
</select>
</body>
JS:
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.ranges = [1, 2, 3, 4, 5];
$scope.selectedRange = $scope.ranges[4];
}
]
);
Plunker
By the way, about your "pre-select" troubles, be aware that JavaScript arrays are zero-indexed.