Angulaire de l'INTERFACE utilisateur-Bootstrap bouton de la liste déroulante sur ng-options

<select class="form-control" data-ng-options="t.name for t in vm.types"
data-ng-model="vm.object.type"></select>

Le code ci-dessus, évidemment, affiche une base déroulante dans un formulaire standard de contrôle de la manière. J'ai été à essayer de comprendre comment faire pour convertir ce un bouton de menu déroulant de style Angulaire à l'aide de l'interface utilisateur-bootstrap directives mais ne semble pas aller n'importe où. Quelqu'un a déjà essayé?

OriginalL'auteur zpydee | 2014-01-14

  1. 9

    J'espère que vous avez déjà trouvé la réponse, mais peut-être que quelqu'un va trouver cela utile. La réponse précédente se réfère à une liste déroulante pas un bouton de liste déroulante. Voici un exemple, mais sans les avantages de hg-option, alors que je n'ai pas utiliser un select, mais un bouton.

    <div class="input-group">
    <div class="input-group-btn" ng-class='{open: open}'>
        <button class="btn dropdown-toggle"
                data-toggle="dropdown" 
                ng-click='open=!open'>
            Action<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li ng-repeat="choice in choices" 
                        ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
                    <a href="#">{{choice}}</a></li>
                </ul>
    </div>
    <input type="text" ng-model="choices[index]" class="form-control">
 </div>

    où le choix est un tableau de chaînes de caractères qui sera affichée dans la liste déroulante, et l'index est une autre variable dans le contrôleur de champ qui reflètent le choix sélectionné.

    Je suis à la recherche d'un clic à l'extérieur près de la directive aussi, mais tout ce que je trouve pourtant très compliqué. Si quelqu'un a une idée, je pense qu'il pourrait être un excellent ajout à cette réponse.

    OriginalL'auteur vladblindu

  2. 6

    J'ai créé une base de démonstration d'une liste déroulante à l'aide angulaire de bootstrap..

    Visite :http://plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3?p=preview

    Espère que c'est ce que vous cherchez.

    OriginalL'auteur Pranav