带有搜索过滤器的可点击 uib-accordion

Question

我在尝试使用搜索过滤器在 uib-accordion 中进行搜索时遇到问题，因此它的状态会更改为打开，同时如果搜索为空，用户可以单击 header打开内容。我找到的所有解决方案都只提供一个选项。

这是我在解决方案中所做的工作 - https://plnkr.co/edit/lnWxv7PVR7cfrvrROchb?p=preview

<div class="input-group">
    <input class="form-control"
           ng-model="searchText"
           placeholder="Search"
           type="search"/>
    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
 </div>

  <div class="settings-tab">
    <uib-accordion>
      <div ng-repeat="item in vm.data | filter: searchText">
        <div uib-accordion-group class="panel-default" is-open="searchText.length">
          <uib-accordion-heading>
            <div>
              {{item.name}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
            </div>
          </uib-accordion-heading>
            <table class="table table-bordered">
              <thead>
                <th>Name</th>
                <th>Value</th>
              </thead>
              <tbody>
                <tr>
                  <td>id</td>
                  <td>{{item.id}}</td>
                </tr>
                <tr>
                    <td>url</td>
                    <td>{{item.url}}</td>
                </tr>
              </tbody>
            </table>
        </div>
      </div>
    </uib-accordion>
  </div>

问题是我需要这两个功能（在手风琴中搜索内容并打开过滤的内容，如果没有搜索，让用户点击任何 drop-down 来查看里面的内容）现在它给出了错误在控制台中。 Plunkr 更新了评论。

Answer 1

好吧，我已经成功地做出了我想要的东西，为此我创建了自定义过滤器，它将更新返回数组中的打开状态。我不知道的是这个的性能。如果有人有更好的解决方案，请post在这里。
Plunkr 已更新。

function searchFilter() {
  return function(data, q){
       var arr = [];
       angular.forEach(data, function(v){
           if(v.id == q) {
             v.open = true;
             arr.push(v);
           } else if (q == '' || !q) {
             v.open = false;
             arr.push(v);
           }
       })
        // console.log(arr);
       return arr;
  }
}

带有搜索过滤器的可点击 uib-accordion

Clickable uib-accordion with search filter

angularjs

angular-ui-bootstrap