如何在 3 列中使用过滤器（离子）

【问题标题】：How to use filters in 3 columns (Ionic)如何在 3 列中使用过滤器（离子）
【发布时间】：2016-12-27 02:48:07
【问题描述】：

我想使用 Ionic 创建一个 3 列 (div) 列表。我想在用户写东西时应用过滤器。我写了下面的代码，但代码只列出了 3 个结果。有人可以帮忙吗？

<ion-view view-title="Browse">
  <ion-content>
    <div>
      <lablel class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search..." ng-model="searchQuery" />
      </label>
    </div>
    <div class="row">
        <div class="col col-33" ng-repeat="contact in contactList | filter:searchQuery">
          {{contact.nome}}
        </div>
    </div>
  </ion-content>
</ion-view>

OBS：代码过滤正确。我有 150 多个结果，当我没有在搜索中写任何内容时，它应该列出所有结果，但只列出其中 3 个。

【问题讨论】：

标签： html search filter ionic-framework

【解决方案1】：

每个人。

我解决了我的问题。我就是这么做的：

我的 ionic 接收来自外部 URL（我的站点）的 JSON 文件。此 JSON 文件由 MYSQL 查询生成。我在查询中使用了 PHP 函数 array_chunk：

$SQL = mysql_query("...");

$CHUNK = array_chunk($SQL, 3);

print json_encode($CHUNK);

所以，在 HTML 代码中我这样做了：

<ion-view view-title="Browse">
      <ion-content>
        <div>
          <lablel class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" placeholder="Search..." ng-model="searchQuery" />
          </label>
        </div>
        <div class="row" ng-repeat="chunk in contactList">
            <div class="col col-33" ng-repeat="item in chunk | filter:searchQuery">
              {{item.nome}}
            </div>
        </div>
      </ion-content>
</ion-view>

说话像个魅力。

【讨论】：