当有多个列表时，如何让搜索框只搜索一个列表？答案

【问题标题】：How can I get a search box to search only one list when there are multiple lists?当有多个列表时，如何让搜索框只搜索一个列表？
【发布时间】：2016-02-04 16:40:46
【问题描述】：

我从我的控制器创建了两个列表，列表 A 和列表 B 来填充我的角度拖放列表。我有一个搜索框，可以在我输入内容时搜索两个列表。我希望我的搜索框只搜索列表 A 而不是列表 B。

Models: {
  "selected": null,
  "lists": {
    "A": [
      {
        "label": "Item A1"
      },
      {
        "label": "Item A2"
      },
      {
        "label": "Item A3"
      }
    ],
    "B": [
      {
        "label": "Item B1"
      },
      {
        "label": "Item B2"
      },
      {
        "label": "Item B3"
      }
    ]
  }
}

    <div class="simpleDemo row">
        <input type="text" class="form-control" placeholder="search" ng-model="searchBox">
        <div class="col-md-12">
            <div class="row">
                <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">{{listName}} code(s)</h3>
                        </div>
                        <div class="panel-body">
                            <ul dnd-list="list">
                                <li ng-repeat="item in list | filter:searchBox"
                                    dnd-draggable="item"
                                    dnd-moved="list.splice($index, 1)"
                                    dnd-effect-allowed="move"
                                    dnd-selected="models.selected = item"
                                    ng-class="{'selected': models.selected === item}">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div view-source="simple"></div>

        </div>

        <!--<div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Generated Model</h3>
                </div>
                <div class="panel-body">
                    <pre class="code">{{modelAsJson}}</pre>
                </div>
            </div>
        </div>-->

    </div>

【问题讨论】：

我使用 ng-if 解决了我自己的问题

标签： angularjs search-box angular-dragdrop

【解决方案1】：

我使用 ng-if 解决了我的问题，仅当 listName 为“A”时才使用过滤器显示 <li>

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">{{listName}} code(s)</h3>
    </div>
    <div ng-if="listName == 'A'" class="panel-body">
        <ul dnd-list="list">
            <li ng-repeat="item in list | filter:searchBox"
                dnd-draggable="item"
                dnd-moved="list.splice($index, 1)"
                dnd-effect-allowed="move"
                dnd-selected="models.selected = item"
                ng-class="{'selected': models.selected === item}">
                {{item.label}}
            </li>
        </ul>
    </div>
    <div ng-if="listName == 'B'" class="panel-body">
        <ul dnd-list="list">
            <li ng-repeat="item in list"
                dnd-draggable="item"
                dnd-moved="list.splice($index, 1)"
                dnd-effect-allowed="move"
                dnd-selected="models.selected = item"
                ng-class="{'selected': models.selected === item}">
                {{item.label}}
            </li>
        </ul>
    </div>
</div>

【讨论】：