Angulaire sélectionnez avec des images

LA SITUATION:

J'ai besoin d'insérer des drapeaux à l'intérieur de la langue sélectionnez. J'ai cherché dans Google et StackOverflow mais les solutions fondées ne sont pas de travail pour moi.

LE CODE:

Dans le contrôleur:

 $scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];

Dans la vue:

<select ng-model="language_selected">
    <option ng-repeat="language in language_list" data-image="{{language.url}}" >{{language.name}}</option>
</select>

EXEMPLE:

http://jsfiddle.net/tcVhN/168/

LA QUESTION:

Comment puis-je insérer des images à l'intérieur de l'angle de sélectionner?

EDIT:

Ici est la Plunker de la solution, nettoyé:

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

utilisation angulaire de l'interface utilisateur, sélectionnez github.com/angular-ui/ui-select

OriginalL'auteur FrancescoMussi | 2015-08-18

  1. 10

    Comme d'autres réponses vous ne pouvez pas utiliser <options> pour ajouter une image, mais vous pouvez utiliser angulaire module interface utilisateur-sélectionnez pour atteindre ce que vous voulez faire.

    Ici est un démo avec de l'interface utilisateur, sélectionnez-la avec vos données.

    Nettoyer le code et obtenir ce dont vous avez besoin.

    Si vous n'êtes pas intéressé dans la boîte de recherche surcharger le CSS,

     .select2-search {
      display: none;
 }

    DÉMO

    OriginalL'auteur K.Toress

  2. 4

    La Réponse:

    Son tout simplement pas possible.

    Autorisées du contenu d'un <option> une balise de Texte avec éventuellement des caractères d'échappement (comme &eacute;).
    HTML n'est pas autorisé.

    Voir les docs pour plus d'informations.

    La solution:

    Faire un personnalisé Déroulant en CSS et HTML.

    OriginalL'auteur Nano

  3. 3

    Il n'est pas possible, comme <option> ne prend en charge le texte.

    Vous peut-être rouler vos propres contrôle de liste déroulante à l'aide de complexes HTML/CSS/JavaScript. Comment faire, il peut ou peut ne pas être dans la portée de votre question.

    Alternativement, vous pouvez utiliser un non-répétition des background-image et appliquer un peu de rembourrage sur le texte pour obtenir un effet similaire. Mais si chaque <option> est d'avoir une image unique, votre code va être polluée par un style attribut pour chaque <option>. Si cela ne vous dérange pas, c'est la fin. Sinon, faites rouler votre propre en quelque sorte.

    Référence : L'ajout d'images avec l'option tag

    OriginalL'auteur Ramesh Rajendran

  4. 1

    Au lieu d'insérer des images que vous pouvez générer des classes css (du nom de la langue ou de l'ajout de valeur que pour ça) et ajouter les images comme images d'arrière-plan dans votre css (à l'aide de sprites).

    <select ng-model="language_selected">
    <option ng-repeat="language in language_list" ng-class="{{ language.name }}" >{{ language.name }}</option>
</select>

    Pour les sprites css que j'utilise habituellement sass avec boussole.

    OriginalL'auteur Tamy