Question

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

<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="faq.open"替换为is-open="search.pregunta?true:false"并将ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"替换为ng-class="{'glyphicon-chevron-down': search.pregunta, 'glyphicon-chevron-right': !search.pregunta}"时出错。

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

Answer 1

如果我总结一下，您需要以下行为：

与search.pregunta匹配的accordion-group标题 - ＆gt; OPEN
手风琴组头不匹配search.pregunta - ＆gt; 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>

通过这种方式，每个手风琴的开/关都与搜索栏相关联。

我希望它有所帮助。

使用条件打开手风琴

1 个答案: