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.
As 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];
}
]
);
By the way, about your "pre-select" troubles, be aware that JavaScript arrays are zero-indexed.