Öffnen Akkordeon mit einer Bedingung

Derzeit habe ich ein Textfeld, in dem ich den Inhalt der Kopfzeile des Akkordeons, sowie den Inhalt filtern kann. Ich würde es mögen, wenn ich etwas tippe, und wenn es Zufall gibt, dehnt sich das Akkordeon aus, aber es gibt einen Zufall, dass die Akkordeons geschlossen sein sollten. wie kann ich es tun?Öffnen Akkordeon mit einer Bedingung

https://jsfiddle.net/3e9arqqe/

<input type="text" placeholder="Search" ng-model="search.pregunta"> 
<uib-accordion close-others="true"> 
<div ng-repeat="faq in faqs | filter: search.pregunta"> 
    <div class="col-sm-11" > 
     <div uib-accordion-group class="panel-default" is-open="faq.open"> 
      <uib-accordion-heading > 
       <span ng-click="ignoreClick($event);" ><a href='' click-to-edit item="faq" ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
      </uib-accordion-heading> 
      <span click-to-edit item="faq" ng-model="faq.respuesta" >{{faq.respuesta}}</span> 
     </div> 
    </div> 
    </div> 
</ui/div> 
    </div> 
</uib-accordion>

Ich habe einen Fehler, wenn ich die is-open="faq.open" mit is-open="search.pregunta?true:false" und ersetzen ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}" mit ng-class="{'glyphicon-chevron-down': search.pregunta, 'glyphicon-chevron-right': !search.pregunta}" ersetzen.

Ich bin im Grunde bestimmen den Expand/Collapse-Status, ob der Suchtext leer ist oder nicht.

Quelle

2017-05-31 yavg

Wenn ich zusammenfassen, wollen Sie das folgende Verhalten:

Akkordeon-Gruppenkopf passend zum search.pregunta -> OPEN
Akkordeon-Gruppenkopf des search.pregunta nicht passend -> GESCHLOSSEN

Wenn dies der Fall ist, sollten Sie versuchen:

https://jsfiddle.net/rtd6v41L/

<input type="text" placeholder="Search" ng-model="search.pregunta"> 
     <uib-accordion close-others="true"> 
      <div ng-repeat="faq in faqs"> 
       <div class="col-sm-11" > 
       <div uib-accordion-group class="panel-default" is-open="faq.pregunta.indexOf(search.pregunta) !== -1"> 
        <uib-accordion-heading> 
         <span ng-click="ignoreClick($event);"> 
         <a href='' click-to-edit item="faq" ng-model='faq.pregunta' typeinput='textarea' > 
          {{faq.pregunta}} 
         </a> 
         </span> 
         <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.pregunta.indexOf(search.pregunta) !== -1, 'glyphicon-chevron-right': faq.pregunta.indexOf(search.pregunta) === -1}"></i> 
        </uib-accordion-heading> 
        <span click-to-edit item="faq" ng-model="faq.respuesta" >{{faq.respuesta}}</span> 
       </div> 
      </div> 
     </div> 
    </uib-accordion>

Auf diese Weise wird das Öffnen/Schließen jedes Akkordeon dem Suchfeld verknüpft.

Ich hoffe es hilft.

Quelle

2017-05-31 14:42:26

Vielen Dank, aber ich sehe ein Problem, ich kann das Akkordeon nicht direkt aus dem Pfeil erweitern. Und das andere Problem ist, dass ich es brauche, wenn ich den Inhalt lösche oder nichts schreibe, schließen sich die Akkorde schließlich. – yavg

Sehen Sie sich die Entwicklerkonsole an, und ich bekomme die ganze Zeit einen Fehler, wenn ich nach einem Objekt suche. – yavg

Ja, das ist eine Einschränkung meiner Implementierung. Wenn Sie in der Lage sein möchten, manuell zu öffnen/zu schließen (indem Sie auf die Pfeile klicken), müssen Sie 2 Modi verwalten, um zu entscheiden, ob ein bestimmtes Akkordeon geöffnet oder geschlossen werden soll . In diesem Fall sollten Sie Methoden in Ihrem Controller erstellen und wie folgt verwenden: is-open = "isOpen (faq.pregunta)". Sie können frei wählen, was in der Funktion zu tun ist und mit komplizierteren Situationen umgehen. –

Öffnen Akkordeon mit einer Bedingung

Antwort

Verwandte Themen