Question

我是一个UI人，对离子框架很新。我想在我使用Ionic框架构建的android应用程序中添加搜索功能。经过研究，我发现我需要使用这个插件https://github.com/djett41/ionic-filter-bar。但没有详细的文件可用。任何人都可以指导如何使用此插件工作。我已完成所有设置但仍坚持使用实际代码。

Answer 1

首先，您必须安装插件。您可以使用 bower ：

bower install ionic-filter-bar --save

它将复制javascript内css文件夹中所需的所有lib和www。

然后，您必须将css的引用添加到 index.html ：

<link href="lib/ionic-filter-bar/dist/ionic.filter.bar.css" rel="stylesheet">

{p>同样适用javascript：

<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js"></script>

您必须为主模块注入模块jett.ionic.filter.bar：

var app = angular.module('app', [
        'ionic',
        'jett.ionic.filter.bar'
    ]);

您必须在控制器中引用服务$ionicFilterBar：

angular.module('app')
        .controller('home', function($scope, $ionicFilterBar){

    });

现在你可以开始使用它了。

在我的示例中，我想在用户点击/点击标题中的图标时触发搜索框。我会将此HTML添加到视图中：

  <ion-nav-buttons side="secondary">
    <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
    </button>
  </ion-nav-buttons>

该操作会触发我的控制器showFilterBar中的事件：

  $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.places,
      update: function (filteredItems, filterText) {
        $scope.places = filteredItems;
      }
    });
  };

创建$ionicFilterBar并显示它。

正如您在此处所见，我正在使用一组对象$scope.places

$scope.places = [{name:'New York'}, {name: 'London'}, {name: 'Milan'}, {name:'Paris'}];

我已链接到items的{{1}}成员。更新方法将在$ionicFilterBar中为我提供已过滤的项目（地点）。

您可以使用此plunker。

另一种选择是使用该插件通过filteredItems远程实际获取一些数据。

如果我们想要实现这一点，我们可以再次使用更新功能。现在我们不需要将项绑定到我们的对象数组，因为我们不需要过滤的元素。

我们将使用$http执行某些操作：

filterText

我们将调用另一个函数，它可能会调用$scope.showFilterBar = function () { var filterBarInstance = $ionicFilterBar.show({ cancelText: "<i class='ion-ios-close-outline'></i>", // items: $scope.places, update: function (filteredItems, filterText) { if (filterText) { console.log(filterText); $scope.fetchPlaces(filterText); } } }); };并返回一些我们可以绑定到对象数组的数据：

$http

另一名侦探here。

PS：

如果您想使用某种自定义进行配置，则必须使用提供程序$scope.fetchPlaces = function(searchText) { $scope.places = <result of $http call>; }在配置中进行配置：

$ionicFilterBarConfigProvider

PPS：

在我的plunker中，我已将angular.module('app') .config(function($ionicFilterBarConfigProvider){ $ionicFilterBarConfigProvider.clear('ion-ios-close-empty'); })和css直接从源代码中复制出来。

<强>更新：

有人要求不要用更新的列表替换列表。我便宜又脏的解决方案是检查script是否包含某些值。如果它是空的（没有搜索），我们在每个元素中设置一个属性filterText，否则我们将found = false数组与places数组进行比较。匹配元素将标记为已找到。

filteredItems

现在我们可以这样整合过滤条：

  function allNotFound(filteredItems) {
    angular.forEach($scope.places, function(item){
      item.found = false;
    });
  }

  function matchingItems(filteredItems) {
    angular.forEach($scope.places, function(item){
        var found = $filter('filter')(filteredItems, {name: item.name});
        if (found && found.length > 0) {
            console.log('found', item.name);
            item.found = true;
        } else {
          item.found = false;
          console.log('not found', item.name);
        }
    });

我们可以使用对象的$scope.showFilterBar = function () { var filterBarInstance = $ionicFilterBar.show({ cancelText: "<i class='ion-ios-close-outline'></i>", items: $scope.places, update: function (filteredItems, filterText) { if (!filterText) { allNotFound(); } else { matchingItems(filteredItems); } } }); };属性来更改元素的样式。

与往常一样，Plunker显示其运作方式。

Answer 2

Ionic使用Angular，Angular包含一个非常有用的atributte过滤器。看看这个：https://docs.angularjs.org/api/ng/filter/filter和那里的例子。此致

在Ionic框架中使用搜索功能

2 个答案: