Angularjs de l'INTERFACE utilisateur de s'effondrer dans ngRepeat

Je suis en train d'intégrer certains panneaux réductibles à un ngRepeat.
C'est ce que j'ai:

<div class="panel panel-default" ng-repeat="element in elements">
 <div class="panel-heading">
  {{element.name}}
  <button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
 </div>
 <div class="panel-body" collapse="element.isCollapsed">
  Content
 </div>
</div>

Maintenant, quand je clique sur le bouton, l'effondrement ne fonctionne pas.
À partir de la documentation, je comprends que la répétition crée un champ pour chaque element.
Et l'attribut collapse du panneau d'administration devrait obtenir le même champ, à droite?
Il semble que la scope.$watch dans le collapse directive ne fonctionne pas correctement.
Ou peut-être que je suis en train de faire quelque chose de mal?

Grâce

S'il vous plaît créer un violon pour la même chose. Veuillez expliquer ng-click="élément.isCollapsed != de l'élément.isCollapsed" Vous vérifier sur le même élément dans l'événement click
Salut V31, merci pour votre commentaire. J'ai créé un violon jsfiddle.net/nZ9Nx/7 et corrigé le code.

OriginalL'auteur Enrico | 2014-02-18

  1. 5

    Veuillez vérifier les mises à jour de violon: http://jsfiddle.net/nZ9Nx/9/

    J'ai créé l'application et injecté de l'interface utilisateur-bootstrap en avoir l'effondrement de travail.

    angular.module('test', ['ui.bootstrap']);
    ce qui est spécial à propos de l'interface utilisateur-bootstrap?
    Sa bibliothèque, qui définit les directives pour l'amorçage des composants javascript qui sont disponibles. Cela permet d'avoir un javacscript Composants (en dehors de la portée angulaire) à l'intérieur de l'angle de champ d'application.
    droit, je le vois, je suppose qu'ils fonctionnent uniquement avec ie9 🙁
    Salut! Merci pour la suggestion. Il fonctionne très bien! C'est exactement ce dont j'ai besoin. Fondamentalement, vous avez utilisé le classique ng-hide/ng-show contourner le "effondrement" de la directive, ai-je le droit? J'étais tellement concentré dans ma solution et je n'ai pas pu voir la plus facile. Merci! Il serait de toute façon très intéressant de comprendre pourquoi la collapse ne fonctionne pas...
    frapper le même problème maintenant. Je PENSE que c'est à faire avec la manière angulaire du processus de modèles et le chemin du fichier d'amorce de l'effondrement plugin fonctionne. Fondamentalement, je PENSE que par moment le bootstrap, javascript (requis pour l'effondrement de plugin) coups de pied dans, le ng-repeat stuff n'est pas encore arrivé, donc en effet de bootstrap JS ne jamais obtenir une chance de faire, c'est de la magie.

    OriginalL'auteur V31

  2. 3

    Le problème est 

    <div class="panel-heading" toggle target="collapseOne">

    C'est codé en dur dans l'exemple. Remplacer avec...

    <div class="panel-heading" toggle target="collapse{{ $index + 1 }}">

    Également mettre à jour cette balise

    <div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">

    Voici un exemple complet

    <div ng-repeat="item in awesomeThings">
    <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
            <h4 class="panel-title">
                {{ item }}
            </h4>
        </div>
        <div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
            <div class="panel-body">
                <!-- ... -->
            </div>
        </div>
    </div>
</div>
    hé, que si l'effondrement du comité n'est pas en ng-repeat portée alors comment voulez-vous déclencheur de l'effondrement

    OriginalL'auteur nathantech333