Question

我是Angular.js的新手我目前正在下拉列表中显示哥伦比亚和美国各国的城市名单。

我正在使用＆＃34; ng-option＆＃34;。我想在下拉城市只有10个字符是有限的。如果是这样就出现省略号（...）。我只是想让它出现在下拉列表中，而不是它是否与＆＃34; ng-repeat＆＃34;我或多或少会如此。

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

我怎么能用ng-option做同样的事？

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

Answer 1

只需在范围上添加功能

$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

Answer 2

您可以创建一个过滤器，将限制字符放入数组对象的某些属性。

/**
  * @name limitToChar
  * 
  * @description Creates a new array with making object's certain property characters limited.
  * 
  * @param input - source array
  * @param {string} prop - property in the array object which will be limit to certain characters
  * @param {number} limit - no of characters to be limited
  * 
  * @returns a new array.
  */
 Aplic.filter('limitToChar', function() {
   return function(input, prop, limit) {
     if(input) {
       var newArray = angular.copy(input);
       limit = limit || 10;
       for(var i = 0; i < newArray.length; i++) {
         if(newArray[i][prop] && newArray[i][prop].length > limit) {
          newArray[i][prop] = newArray[i][prop].substring(0, limit) + '...';
         }
       }
       return newArray;
     }
   }
 })

在ng-options的{{1}}中，应用过滤器：

limitToChar：＆＃39; DEP＆＃39;：10

states

ng-options="state.id as state.dep for state in (((countries | filter:{'id':selectedCountry})[0].states) | limitToChar:'dep':10) track by state.id"过滤器创建一个新数组，使用某些字符（限制）过滤它的对象属性（传递属性）并返回新数组。限制默认值为10。因此，如果您没有通过限制，则10将是字符数。

PLUNKER

把“|使用ng-options在Angular.js中限制“

2 个答案: