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>

Answer 1

你想打开与搜索匹配的手风琴，对吧？不完全隐藏它们吗？

您可以使用is-open属性中的表达式，例如。像这样：

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

Here's a working fiddle

Answer 2

如果你想要的是扩展过滤后的结果，那么你必须用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}"

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

这是一个有效的fiddle

打开手风琴。 Angular.js

2 个答案: