使用条件打开手风琴

目前我有一个文本字段，可以在其中过滤手风琴标题的内容以及内容。当我打字时，我会喜欢它，如果有巧合，手风琴将会扩展，但是巧合的是手风琴应该关闭。我该怎么做？使用条件打开手风琴

<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}"。

我基本上是确定搜索文本是否为空的展开/折叠状态。

来源

2017-05-31 yavg

如果我总结一下，你想要的以下行为：

手风琴组头相匹配的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>

这样，每个手风琴的打开/关闭链接到搜索领域。

我希望它有帮助。

来源

2017-05-31 14:42:26

非常感谢，但我看到一个问题，我无法直接从箭头扩展手风琴。另一个问题是，当我删除内容或不写任何内容时，我需要它，和弦最终关闭。 – yavg

看看开发者控制台，并且当我查找某个项目时，我总是遇到错误。 – yavg

是的，这是我实施的一个限制。实际上，如果您想要手动打开/关闭（通过单击箭头），您必须管理2种模式，以根据搜索+箭头上的点击历史记录确定是否应打开或关闭某个手风琴。在这种情况下，您应该在您的控制器中创建方法并像这样使用它：is-open =“isOpen（faq.pregunta）”。您可以自由选择在功能中做什么，并处理更复杂的情况。 –

使用条件打开手风琴

回答

相关问题