peut ngOptions appeler une fonction pour obtenir l'affichage du texte?

J'ai un select tag que je suis de liaison à un tableau de la station de radio des objets en utilisant AngularJS. Mon objet a les propriétés suivantes:

{
    id: 'WXYZ',
    name: 'Radio Station Name (optional)',
    frequency: '89.7 FM'
}

J'aimerais que chaque élément dans la liste déroulante pour afficher "{id} - {name} - {fréquence}", comme l'affichage de texte, mais depuis que le nom de la propriété est facultative, je voudrais éviter les doubles tirets dans le cas où un objet n'a pas de valeur pour son nom.

J'ai été en mesure d'obtenir ce travail:

<select ng-model="StationPreference" ng-options="s.id+ ' - ' + s.name + ' - ' + s.frequency for s in stations">
    <option value="">-- select --</option>
</select>

Quelles sont les règles/lignes directrices/les meilleures pratiques pour l'appel d'une fonction à l'intérieur de ng-options? J'aimerais faire quelque chose comme getDisplayText(s) -- ce qui rend l'expression "valide angulaire"? la fonction doit être définie à l'intérieur de la portée? Peut-il en être de l'extérieur de la fonction définie? Est-ce la meilleure approche pour la fonctionnalité désirée?

Vous pouvez essayer de + s.name || 'No name supplied' +

OriginalL'auteur Brian Oliver | 2014-02-14

  1. 6

    Est-il possible d'appeler une fonction à l'intérieur de ng-options?

    Réponse courte: oui. (Un test rapide aurait également répondu à cette question pour vous.)

    Plus réponse: ng-options vous permet de spécifier n'importe quelle expression (tant que c'est valable pour tout Angulaire) dans les deux label et value fentes des options de compréhension (voir les docs). Cela signifie que vous pouvez spécifier une fonction disponible sur la portée de produire votre label chaîne.

    Mise à jour:

    De la valeur utilisée par ng-options que l'étiquette est générée par la consommation de la chaîne que vous avez fournis et en passant à $parse pour générer un évaluables expression qui sera appelé plus tard. Cette expression est ensuite exécuté contre le scope avec les valeurs locales de la boucle réellement générer la chaîne qui s'affiche. L'expression peut faire tout ce que vous pourriez mettre dans un {{ interpolation }} (interpolations sont fait avec $parse trop, si je ne me trompe), ce qui peut inclure de la concaténation de chaînes, appeler des fonctions visibles sur la portée (qui pourrait vraiment exister sur un parent et d'être hérité), la course Angulaire de filtres (par exemple, lowercase ou json), etc.

    En termes de bonnes pratiques, je dirais que votre affichage initial de s.id+ ' - ' + s.name + ' - ' + s.frequency est probablement fine comme une expression plutôt que de l'extraire à une fonction sur le champ. Cependant, il est légèrement complexe et en ajoutant la condition que vous désirez serait certainement pousser sur le bord d'une fonction (même s'il est possible qu'une expression à l'aide d'un ternaire). En général, si la logique d'affichage est complexe ou si la même logique est utilisé dans plusieurs endroits, il doit être extrait à une fonction, ou même un filtre en fonction de la façon dont il est générique.

    Merci @squid314 - j'avais déjà regardé les docs. label: The result of this expression will be the label for <option> element. The expression will most likely refer to the value variable n'était pas clair pour moi, en plus je voulait demander de plus qu'un simple "c'est possible". J'ai précisé ma question.
    Bla bla.. qu'en quelques exemple de code à la place?

    OriginalL'auteur squid314

  2. 11

    cela a fonctionné pour moi:

    <select ng-model="myForm.car"
        ng-options="obj.id as genName(obj.id,obj.name) for obj in myForm.options">
    <option value="">Select...</option>
</select>


$scope.myForm.options = [
    { id : "nissan", name: "Nissan" },
    { id : "toyota", name: "Toyota" },
    { id : "fiat"  , name: "Fiat" }
];

$scope.genName = function(id,name) {
    return id + ' ' + name;
}
    votre solution est de travailler pour le texte, mais je veux une image avec du texte pour ex. j'ai la liste des pays et je veux le montrer avec le drapeau alors, comment puis-je montrer?
    CSS/HTML ne permet pas une image ou une image d'arrière-plan pour être montré dans une option. C'est une limitation de spécifications. Vous aurez à utiliser un custom de la directive, par exemple angularjsaz.blogspot.com/2015/11/...

    OriginalL'auteur koolunix

  3. 0

    Il est un peu caché dans la documentation, mais il peut être obtenu facilement.

    Dans votre cas, c'est la syntaxe documenté comme : 

    select as label for value in array

    Et donc, pour vous avez besoin de:

    <select ng-model="StationPreference" ng-options="s as getDisplayText(s) for s in stations">
    <option value="">-- select --</option>
</select>

    OriginalL'auteur NicolasP