L'Application Angulaire De Bootstrap Déroulant Exemple

Je tiens à apporter les menus déroulants dans mon projet et j'ai pris le code de l'exemple. Le menu déroulant s'affiche comme dans l'exemple mais quand je clique dessus rien ne se passe.

<form class="form" name="form"  novalidate>
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button"
            class="btn btn-primary dropdown-toggle"
            dropdown-toggle
            ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <div>
</form>

Maintenant le contrôleur pour ce html:

angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
    ];

    $scope.status = {
        isopen: false
    };

    $scope.toggled = function(open) {
        $log.log('Dropdown is now: ', open);
    };

    $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
    };
});

Qui Bootstrap/AngularJS intégration lib utilisez-vous?
Je suis en utilisant Angulaire Fullstack. Au sein de la client il y a un bower_components dossier avec un angulaires-bootsrap dossier avec un ui-bootstrap.js fichier qui sonne comme celui de la démo de code. L'exemple se trouve ici: angular-ui.github.io/bootstrap
Oui, quel est le problème? Je veux dire que c'est le droit de la bibliothèque de droit?
Pas de problème. Ajouté les balises pertinentes en conséquence.
Alors pourquoi ne pas la liste déroulante de travail?

OriginalL'auteur rashadb | 2014-12-20

J'ai eu le même problème et je l'ai résolu en supprimant la ligne dropdown-toggle

Je ne sais pas quel est le problème, mais il fonctionne bien dans cette façon

Ici ce que j'ai fait:
De ce si l'original exemple:

    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

et c'est le code sans dropdown-toggle

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Edit:

L'exemple ci-dessus fonctionne si vous utilisez le angular-ui-bootstrap Version: 0.10.0

Maintenant, j'ai changé l'interface utilisateur-amorçage à l'aide de cette

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

Et maintenant tout fonctionne comme un charme

Merci. Cela a fonctionné pour moi aussi bien avec la version 0.10.0.
Pour moi la solution a été exactement l'inverse: j'ai besoin de assurez-vous que le bouton a de la dropdown-toggle attribut, et le parent div la dropdown attribut, ou bien le bouton n'a aucun effet.
à l'opposé de ce qui fonctionne pour la version 0.12.0

OriginalL'auteur Jorge Casariego

Il y a quelques problèmes dans votre code:

Votre code HTML n'est pas valide, le dernier <div> balise ne devrait pas être là

<form class="form" name="form" novalidate>
    <div class="btn-group" dropdown is-open="status.isopen">
        <button type="button"
                class="btn btn-primary dropdown-toggle"
                dropdown-toggle
                ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
            <li>
                <a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Separated link</a>
            </li>
        </ul>
    </div>
</form>

Vous n'avez pas de référence ui.bootstrap comme un module de dépendance

angular.module('startupApp', [
    'ui.bootstrap'
])

Avez-vous d'inclure les bons fichiers ?

AngularJS
Angulaire UI Bootstrap
Bootstrap CSS

Vous n'avez pas besoin de quelque chose de spécial dans votre contrôleur, le dropdown et dropdown-toggle directives sont auto-suffisants.

JsFiddle Démo

J'ai corrigé l'erreur html, mais pas de changement. L'angle de Fullstack que j'utilise dispose d'une interface utilisateur.bootstrap comme une dépendance exactement comme indiqué ci-dessus, juste dans mon application fichier. Je ne suis pas sûr de ce que tu veux dire: "le droit des fichiers. J'ai choisi de bootstrap et de l'interface utilisateur-bootstrap comme des dépendances quand j'ai la configuration de la graine à l'aide de Yeoman/Bower. De ce fait j'ai des dossiers angulaire, angulaire-bootstrap, bootstrap, bootstrap-sass-officiel . . .
Eh bien essayer de le reproduire dans un JsFiddle ou je ne vais pas être en mesure d'aider beaucoup plus.

OriginalL'auteur Florian F.

0

Après beaucoup de lutte, je viens de trouver la réponse qui a fonctionné pour mon cas. J'ai seulement besoin d'ajouter analyser-angulaire de mon angulaire.module('myapp'['parse-angulaire']).

OriginalL'auteur rashadb

D'abord je tiens à dire merci à Jorge Casariego pour sa réponse. Sa réponse m'a aidé à obtenir beaucoup plus loin.

Il y avait un problème à la fin, cependant, que ni $scope.toggled = function(open) {...} ni $scope.toggleDropdown = function($event) {...} là où il est appelé lorsque quelqu'un a interagi avec la liste Déroulante (voir l'exemple ici). Après avoir examiné la ui-bootstrap-tpls-0.10.0.js code que j'ai dû ajuster le code html:

l'attribut dropdown devrait être une classe-de la valeur d'un attribut lui-même.
is-open=... n'est pas nécessaire, l'interface utilisateur-bootstrap va prendre soin d'elle
joindre un ng-click à la <a> élément dans la liste.

Cela ne fonctionne pas pour moi (dropdown comme un attribut):

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

Mais ce n' (ajouter dropdown comme une valeur de classe):

<!-- Single button -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

Le reste de ma Angulaire Application se présente alors:

$scope.toggleDropdown = function($event) {
  $event.preventDefault();
  console.log('This is your event now: ', $event);
};

Je sais qu'il y a de nouvelles versions disponibles de angular-ui-bootstrap, mais pour le dossier je le mets ici. Il fonctionne avec la version 0.10.0.

OriginalL'auteur natterstefan

Vous devez vous connecter pour publier un commentaire.