Question

我正在尝试调整以下搜索过滤器here，但几乎没有成功。我错了什么？

到目前为止，这是我的代码：

controllers.js

angular.module('starter.controllers', ['starter.services'])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('SearchCtrl', ["$scope", "ServicesData", function($scope, ServicesData, filterFilter)  {

  // Get list items

  $scope.categoryList = ServicesData.getAllCategories();
  $scope.serviceList = ServicesData.getAllServices();
  $scope.businessList = ServicesData.getAllBusinesses();

  // Filter search

  $scope.filterOptions = function(){
    $scope.filteredArray = filterFilter($scope.categoryList, $scope.serviceList, $scope.businessList);
  };
}]);

search.html

<div class="bar bar-subheader" style="border-bottom: 1px solid #ddd; height: 4em">
    <div class="bar bar-header item-input-inset">
      <label class="item-input-wrapper" style="margin-left: -0.5em;">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="data" ng-change="filterOptions()">
      </label>
      <button class="button button-clear">
        Cancel
      </button>
    </div>
  </div>
<div id="result-list" ng-show="data.length > 0" style="margin-top: 3.9em" ng-model="data">
  <ul class="list">
    <li class="item" ng-repeat="item in categoryList | orderBy:'title'">{{item.title}}</li>
    <li class="item" ng-repeat="item in serviceList | orderBy:'title'">{{item.title}}</li>
    <li class="item" ng-repeat="item in businessList | orderBy:'title'">{{item.name}}</li>
  </ul>
</div>

Answer 1

首先，您必须正确注释控制器。

例如：

.controller('SearchCtrl', ["$scope", "ServicesData", "filterFilter" function($scope, ServicesData, filterFilter)  {

第二个filterFilter作为参数，一个数组，一个表达式来过滤该数组和一个比较器。这意味着你不能只传递三个数组并期望得到一些结果。

如果要使用一个Input过滤所有三个数组，则必须分别针对每个数组调用过滤器函数。或者直接在每个ng-repeat的{{1}}中应用过滤器。

e.g：

<li>

请注意，这样您就不需要输入中的<li class="item" ng-repeat="item in filteredCategory = (categoryList | orderBy:'title' | filter:data )">{{item.title}}</li> <li class="item" ng-repeat="item in filteredService = (serviceList | orderBy:'title' | filter:data)">{{item.title}}</li> <li class="item" ng-repeat="item in filterredBussiness = (businessList | orderBy:'title' | filter:data)">{{item.name}}</li>。

使用AngularJs过滤搜索不起作用

1 个答案: