javascript - 在选择中使用 ngPluralize

标签 javascript angularjs

是否可以在配置有 ngOoptions 的选择标签内使用 ngPluralize 来复数下拉列表的选项?

我目前有以下 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);
  });
};

和下面的标记

<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>  

我还尝试使用 ng-repeat 自己创建选项并且效果很好。不幸的是,虽然我在我的 Controller 中指定了一个默认值,但下拉列表有一个空的默认值并且没有被预选。如果我使用 ngOptions 方法,预选会起作用,但值不会复数。

最佳答案

作为Dmitry解释说,ngPluralize 不能与 ngOptions 一起使用,但是没有什么可以阻止您将它与 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

顺便说一下,关于您的“预选”问题,请注意 JavaScript 数组是 zero-indexed .

关于javascript - 在选择中使用 ngPluralize,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15471736/

相关文章:

javascript - 如何根据在javascript中选择单选按钮的下拉列表在文本框中显示相应的值?

javascript - 拦截器不工作

javascript - React - 显示 firestore 时间戳

javascript - 如何在此 JS 代码中添加默认图像?

javascript - 如何将 jquery 函数/回调移动到准备好的文档中

javascript - 打开选项卡中的链接重定向到登录页面而不是给定的 url

angularjs - 使用 Angular 创建互斥的表单字段

javascript - angularjs - ng-view 重新排列 html 元素

angularjs - Angular Protractor 在代理后面带有 BrowserStack

javascript - 简单的 Vuejs 验证代码无法按预期工作?