admin管理员组

文章数量:1431911

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.

  • javascript
  • angularjs
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. ngPluralize needed to be set on item with pluralizable text (read <option>), but it's defined onto <select>. The way out is to use ngRepeat instead of ngOptions plnkr.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
Add a ment  | 

1 Answer 1

Reset to default 9

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];
      }
    ]
  );

Plunker

By the way, about your "pre-select" troubles, be aware that JavaScript arrays are zero-indexed.

本文标签： javascriptUsing ngPluralize within selectStack Overflow

版权声明：本文标题：javascript - Using ngPluralize within select - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745591928a2665252.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。