过滤器搜索与 AngularJs 不起作用

Filter search with AngularJs not working

本文关键字：不起作用 AngularJs 搜索 过滤器      更新时间：2023-09-26

我正在尝试适应此处看到的以下搜索过滤器，但几乎没有成功。我做错了什么？

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

控制器.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);
  };
}]);

搜索.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>

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

例如： 

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

第二个filterFilter将一个数组、一个用于过滤该数组的表达式和一个比较器作为参数。这意味着您不能只传递三个数组并期望一些结果。

如果要使用一个输入过滤所有三个数组，则必须分别针对每个数组调用filter 函数。或者直接在每个<li>的ng-repeat中应用过滤器。

例如：

<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>

请记住，这样您就不需要输入中的ng-change。

相关文章：