使用条件打开手风琴
问题描述:
目前我有一个文本字段,可以在其中过滤手风琴标题的内容以及内容。当我打字时,我会喜欢它,如果有巧合,手风琴将会扩展,但是巧合的是手风琴应该关闭。我该怎么做?使用条件打开手风琴
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>
我有一个错误,当我与is-open="search.pregunta?true:false"
替换is-open="faq.open"
与ng-class="{'glyphicon-chevron-down': search.pregunta, 'glyphicon-chevron-right': !search.pregunta}"
取代ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"
。
我基本上是确定搜索文本是否为空的展开/折叠状态。
答
如果我总结一下,你想要的以下行为:
手风琴组头相匹配的search.pregunta - >打开
手风琴组头不匹配search.pregunta - > CLOSED
如果是的话,你应该尝试:
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>
这样,每个手风琴的打开/关闭链接到搜索领域。
我希望它有帮助。
非常感谢,但我看到一个问题,我无法直接从箭头扩展手风琴。另一个问题是,当我删除内容或不写任何内容时,我需要它,和弦最终关闭。 – yavg
看看开发者控制台,并且当我查找某个项目时,我总是遇到错误。 – yavg
是的,这是我实施的一个限制。实际上,如果您想要手动打开/关闭(通过单击箭头),您必须管理2种模式,以根据搜索+箭头上的点击历史记录确定是否应打开或关闭某个手风琴。在这种情况下,您应该在您的控制器中创建方法并像这样使用它:is-open =“isOpen(faq.pregunta)”。您可以*选择在功能中做什么,并处理更复杂的情况。 –