放入"|"Angular.js中使用ng-options的LimitTo" [英] Put “| LimitTo” in Angular.js using ng-options

问题描述

我是Angular.js的新手我目前在下拉列表中显示哥伦比亚和美国国家/地区的城市列表.

I am new in Angular.js I am currently in a dropdown showing a list of cities in Colombia and the United States countries.

我正在使用"ng-option".我希望在下拉列表城市中只能限制10个字符.以及是否出现省略号(...).我只是希望它显示在下拉列表中，而不是它的值，如果它使用"ng-repeat"，那么我会或多或少地显示出来.

I'm using "ng-option". I want in the dropdown cities only 10 characters is limited. and if so to appear ellipsis (...). I just want this to appear in the dropdown, not the value of if it did with "ng-repeat" I would more or less so.

<option ng-repeat='state in countries' value='{{state.id}}'>  {{state.dep | LimitTo: 10}} {{state.dep.length> 10? '...' ''}} </option>

除了ng-option之外，我该怎么做?

how I can do the same but with ng-option?

http://plnkr.co/edit/qGwqrlSbDrmuvpY1dI7I?p=preview

推荐答案

只需在作用域上添加一个函数

Just adding a function on the scope

$scope.getLimitedWord = function(word, size){
  if(word.length <= size){
    return word;
  } else {
    return word.substr(0,10) + '...';
  }
}

并使用它

<select id="state" 
    ng-model="selectedState" 
    ng-options="state.id as getLimitedWord(state.dep,10) for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
    <option value="">Choose</option>
</select>

您在这里: http://plnkr.co/edit/NJRlvem5jnVVMvpE9Etf?p=preview

这篇关于放入"|"Angular.js中使用ng-options的LimitTo"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！