Angular ngOptions 切片或椭圆

Question

我在 ngOptions 中显示了一些非常长的句子，我从 api.. ..) 单词末尾有点...，嗯，也许我应该尝试创建一个过滤器，我应该在其中获取 str 的长度，而不是根据我想要的字符数对其进行切片..任何帮助将不胜感激。

$scope.colors = [
  {name:'blacksomerandomwords', shade:'dark'},
  {name:'whitesomerandomwords', shade:'light', notAnOption: true},
  {name:'redsomerandomwords', shade:'dark'},
  {name:'bluesomerandomwords', shade:'dark', notAnOption: true},
  {name:'yellowsomerandomwords', shade:'light', notAnOption: false}
]; 
<select ng-model="myColor" ng-options="color.name for color in colors"></select>

Answer 1

yourApp.filter('short', function() { 
  // pass in collection, property to shorten and max length
  return function(values, property, length) {
    angular.forEach(values, function(value) { 
      value[property] = value[property].length <= length ? 
                        value[property] : 
                        value[property].substr(0, length) + '...';  
    });
    return values;
  };
});

<select ng-model="myColor" 
        ng-options="color.name for color in colors | short:'name':6">
</select>

相关插件在这里http://plnkr.co/edit/Mvky0H

Answer 2

您可以使用 CSS 样式 text-overflow:ellipsis 填充效果：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp。只要您限制选项包装元素的宽度。

Angular ngOptions 切片或椭圆

Angular ngOptions Slice or ellipse

javascript

slice

angularjs