開放式手風琴。 Angular.js

目前我有一個文本字段，可以在其中過濾手風琴標題的內容以及內容。當我打字時，我會喜歡它，如果有巧合，手風琴將會擴展，但是巧合的是手風琴應該關閉。我該怎麼做？開放式手風琴。 Angular.js

<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>

來源

2017-05-30 velez11

你想要的手風琴不匹配露面暈倒，沒有得到過濾掉？ – CodeWarrior

@CodeWarrior當他們重新出現時，他們應該好像關閉 – velez11

如果你想要的是有篩選結果進行擴展，你必須在is-open="faq.open"與is-open="search.pregunta?true:false" 代替，並用ng-class="{'glyphicon-chevron-down': search.pregunta, 'glyphicon-chevron-right': !search.pregunta}"

我們基本上確定更換ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"關於搜索文本是否爲空的展開/摺疊狀態。

這裏是一個工作fiddle

來源

2017-05-30 19:57:34 CodeWarrior

！但我在控制檯中得到一個錯誤..你可以嘗試.. :( – velez11

要打開與搜索匹配的手風琴上，對不對？不完全隱藏它們？

您可以使用is-open屬性中的表達式，例如。像這樣：

is-open="search.pregunta && faq.pregunta.indexOf(search.pregunta) !== -1"

Here's a working fiddle

來源

2017-05-30 20:05:15 omnibrain

它的工作原理，但我在控制檯中得到一個錯誤.. – velez11

開放式手風琴。 Angular.js

回答

相關問題