Question

我尝试使用搜索过滤器在uib-accordion内搜索时遇到问题，以便将其状态更改为打开，同时如果搜索为空，则用户可以点击标题打开内容。我发现的所有解决方案只提供了一个选项。

以下是我在解决方案中所做的工作 - 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>

问题是我需要这两种功能（以手风琴搜索并打开已过滤的内容，如果没有搜索，则让用户点击任何下拉列表以查看其中的内容）现在它＆＃39 ; s在控制台中给出错误。 Plunkr更新了评论。

Answer 1

好吧，我已经设法制作了我想要的东西，为此我创建了自定义过滤器，它将更新返回数组中的打开状态。我不知道的是它的性能。如果有人有更好的解决方案，请在此发布。
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与搜索过滤器

1 个答案: