Setzen Sie "| LimitTo "in Angular.js mit ng-Optionen

Question

Ich bin neu in Angular.js Ich bin derzeit in einem Dropdown-Liste mit einer Liste von Städten in Kolumbien und den Vereinigten Staaten.

Ich verwende "ng-option". Ich möchte in den Dropdown-Städten nur 10 Zeichen limitieren. und wenn so zu erscheinen, Ellipse (...). Ich möchte nur, dass dies in der Dropdown-Liste angezeigt wird, nicht der Wert von, wenn es mit "ng-repeat" wäre, würde ich mehr oder weniger so.

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

Wie kann ich das gleiche tun, aber mit ng-Option?

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

Answer 1

nur eine Funktion auf den Umfang Zugabe

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

Und es

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

Hier verwenden Sie gehen: http://plnkr.co/edit/NJRlvem5jnVVMvpE9Etf?p=preview

Answer 2

Sie einen Filter erstellen können, die gestellt werden ein Begrenzungszeichen für die bestimmte Eigenschaft eines Array-Objekts.

/** 
    * @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; 
    } 
    } 
}) 

Und in der ng-options von states, wenden Sie den Filter:

limitToChar: 'dep': 10

ng-options="state.id as state.dep for state in (((countries | filter:{'id':selectedCountry})[0].states) | limitToChar:'dep':10) track by state.id" 

Der limitToChar Filter ein neues Array erzeugt, filtert Objekteigenschaft (übergebene Eigenschaft) mit bestimmten Zeichen (Limit) und gibt das neue Array zurück. Der Standardwert ist 10 für Limit. Also, wenn Sie kein Limit überschreiten, wird 10 die Anzahl der Zeichen sein.

PLUNKER