/ / Mantenga el acordeón bootstrap abierto al hacer clic - angularjs, twitter-bootstrap, accordion

Mantenga el acordeón de arranque abierto al hacer clic: angularjs, twitter-bootstrap, acordeón

Tenemos lo siguiente en mi vista AngularJS. El problema es que cuando un usuario hace clic en el cuadro de texto por segunda vez, cierra el acordeón, quiero que permanezca abierto hasta que se abra un acordeón diferente.

<div class="col-xs-7 panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="" data-target="#collapseOne" class="collapsed">
<input class="form-control" type="text" ng-model="vm.Whatever" placeholder="Whatever">
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
lorem ipsum....
</div>
</div>
</div>
</div>

¿Hay una manera simple de hacer esto?

Para aclarar la confusión, lo he cambiado a lo siguiente

<accordion class="col-xs-7 panel-group" id="accordion">
<accordion-group>
<accordion-heading>
<input class="form-control" type="text" ng-model="vm.Whatever" placeholder="Whatever">
</accordion-heading>
<div>
lorem ipsum....
</div>
</accordion-group>
</accordion>

Respuestas

2 para la respuesta № 1

Utilizando el accordion* directiva de angular-ui, solo puede evitar la alternancia si establece is-disabled (aquí esta la src) Pero probablemente un enfoque más fácil es forzar el is-open variable para ser true al hacer clic:

<accordion-group is-open="openA" ng-click="openA = true">
<accordion-heading>
whatever
</accordion-heading>

</accordion-group>

<accordion-group is-open="openB" ng-click="openB = true">
<accordion-heading>
whatever
</accordion-heading>

</accordion-group>

0 para la respuesta № 2

Esto puede ser un duplicado de Cómo evitar que se cierre un menú desplegable angular-bootstrap (evento de desvinculación que estaba vinculado por una directiva)

<accordion-group ng-click="$event.stopPropagation()">