使用 AngularJS 通过查询数组创建即时搜索

Question

这将是一个相当冗长的问题，所以请耐心等待...

我有大约 25-30 项的数组。它们通过各种过滤器进行分类，例如品牌、类型、material、尺寸等。我如何才能构建可搜索的过滤器。我见过的所有这些都在他们的过滤器中包含一个 filter:query |。但是我无法查询我现有的数组。

这是我的数组的样子，只显示 1 个项目以缩小尺寸..

$scope.products = [
{
src: 'images/img/image1.jpg',
name:  'XXX-1A',
brand: 'Brand A',
material: 'dry',
size: '00',
type: 'dry pipe',
color:'red'
}];

过滤功能（只包含1个保存space）：

$scope.brandIncludes = [];

    $scope.includeBrand = function(brand) {
        var i = $.inArray(brand, $scope.brandIncludes);
        if (i > -1) {
            $scope.brandIncludes.splice(i, 1);
        } else {
            $scope.brandIncludes.push(brand);
        }
    }

    $scope.brandFilter = function(products) {
        if ($scope.brandIncludes.length > 0) {
            if ($.inArray(products.brand, $scope.brandIncludes) < 0)
                return;
        }

        return true;
    }

这是我用来从 HTML 筛选的内容，我正在使用复选框 select 每个筛选器：

<div class="info" ng-repeat="p in products |  
filter:brandFilter | 
filter:materialFilter | 
filter:typeFilter | 
filter:styleFilter">
</div>

我的搜索栏标记：

  <div class="filtering">
    <div class="search-sect">
     <input name="dbQuery" type="text" placeholder="Search pieces" class="search-input" ng-model="query"/>
  </div>

过滤器的标记之一：

<input type="checkbox" ng-click="includeStyle('adaptor')"/>Adaptor<br>

现在你已经有了所有的代码，以下是我尝试过的一些似乎运行不正确的东西：

我的尝试：

搜索栏：

  <input type="text" id="query" ng-model="query"/>

过滤器：

<li ng-repeat="p in products | filter:query | orderBy: orderList">

我知道对于一些有经验的 angular 来说，这是一个相对容易的任务，但我只是在学习，似乎无法全神贯注地搜索查询。这可能是我忽略的一个简单解决方案。这是我的第一个 Angular 应用程序，为了学习更多知识，我正竭尽全力。

感谢所有回复，提前致谢！

根据要求：CodePen

Answer 1

简单的内置 angular 过滤器不够智能，无法与您的复选框设计配合使用，因此请尝试编写自定义过滤器。您需要将您提到的复选框绑定到范围内的变量，例如brandFilterIsEnabled。请参阅 writing custom filters 的教程。这是一个工作示例。

var myApp = angular.module('myApp', []);

myApp.controller('ctrl', function ($scope) {
  $scope.items = [{
    name:'foo',
    color:'red'
  },{
    name:'bar',
    color:'blue'
  },{
    name:'baz',
    color:'green'
  }];

  $scope.searchNames = true;
  $scope.searchColors = true;

  $scope.$watch('searchColors', function(){
    $scope.searchKeys = [ $scope.searchNames ? 'name' : null, $scope.searchColors ? 'color' : null ];
  });
  $scope.$watch('searchNames', function(){
    $scope.searchKeys = [ $scope.searchNames ? 'name' : null, $scope.searchColors ? 'color' : null ];
  });
});

myApp.filter('advancedSearch', function($filter) {
  return function(data, keys, query) {
    results = [];
    if( !query ){
      return data;
    } else {
      
       angular.forEach( data, function( obj ){
          var matched = false;
          angular.forEach( keys, function( key ){
             if( obj[key] ){  
                // match values using angular's built-in filter
                if ($filter('filter')([obj[key]], query).length > 0){
                   // don't add objects to results twice if multiple
                   // keys have values that match query
                   if( !matched ) {
                      results.push(obj);
                   }
                   matched = true;
                }
             }
          });
       });
    }
    return results;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
   <div ng-controller="ctrl">
     <input type='checkbox' ng-model='searchNames'>search names</input>
     <input type='checkbox' ng-model='searchColors'>search colors</input>
     <input type='text' ng-model='query'>search objects</input>
     <ul>
        <li ng-repeat="item in items | advancedSearch : searchKeys : query">
         <span style="color:{{item.color}}">{{item.name}}</span>
        </li>
       </ul>
   </div>
</html>

使用 AngularJS 通过查询数组创建即时搜索

Using AngularJS to create an instant search by querying an array

javascript

arrays

search

filtering

angularjs