Question

我正在使用AngularJS中的查询过滤器创建一个搜索网站。我找到了很多关于如何在一个字段中实现此搜索的教程，但没有一个解释如何在多个字段中进行搜索。 但不能正常工作

我想使用OR逻辑使用多个字段进行搜索。如果我在搜索框中给出名称将按post_name过滤，如果我在搜索框中给出类别将按照此类过滤post_category。

home.html的

<form ng-submit="submitForm()">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Search" name="searchtxt" ng-model="searchtxt">
                    </div>    
                    <div class="btn-block text-right">
                      <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

search.html

<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="blog in blogposts">
    <article class="blogPost">
        <a href="#/{{blog['post_title']}}"><img src="{{blog['post_image']}}"/></a>
         <div class="inner-content">
                                <h3 class="entry-header">
                                    <div class="post-date">
                                        <span class="post-month">{{blog['post_date'] | dateToISO | date:"MMM"}}</span>
                                        <span class="post-day">{{blog['post_date'] | dateToISO | date:"d"}}</span>
                                    </div>
                                    <a href="#/{{blog['post_title']}}">{{blog['post_title']}}</a>
                                </h3>
                                <div class="body-post">{{blog['post_content'] | limitTo:150}}...</div>        
                                <h5>
                                    <span class="pull-left">
                                            <i class="fa fa-clock-o"> {{blog['post_date'] | dateToISO | date:"d MMM y, h:mm:ss a"}}</i> 
                                            <i class="fa fa-tag cattag"> {{blog['category_name']}}</i>
                                    </span>
                                </h5>
                            </div>
    </article>

data.json

[
   {
    "post_id":1,
    "post_title": "Blog Post One",
    "post_content":  "Lorem ipsum dolor sit amet",
"post_category" : "business",
    "post_author": "Nick Moreton",
    "post_image":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0_AIUUg4B7vVSj1E-A0SA_yrsxmvKLQZKgIKu1dOJ3MAXb4J8",
    "post_date":"2015-12-27 02:23:20"
    },
   {
    "post_id":2,
    "post_title": "Blog Post Two",
    "post_content":  "Lorem ipsum dolor sit amet",
"post_category" : "business",
    "post_author": "Nick Moreton",
    "post_image":"http://i.imgur.com/ZqFeKWv.jpg",
    "post_date":"2015-08-17 02:23:20"
     },
   ]

app.js

var app = angular.module('SearchApp', ['ngRoute','angular.filter']);

   app.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {   
    $routeProvider      
    .when('/',{
            templateUrl : 'home.html',
            controller: 'HomeController'
    })
    .when('/search',{
            templateUrl : 'search.html',
            controller: 'SearchController'
    })
    .otherwise({
        redirectTo : '/'
    });
    } 
   ]);

  app.filter('dateToISO', function() {
    return function(input) {
    input = new Date(input).toISOString();
    return input;
   };
  });

   app.controller('HomeController', function($scope,$http,$location,$rootScope) {

      $scope.submitForm = function(){
        $rootScope.blogSearch = $scope.searchtxt;
        console.log($scope.blogSearch);
        $location.path('/search');
      };

    });

    app.controller('SearchController', 
      function($scope,$http,$location,$rootScope,$filter) {
       $http({
            method:'GET', 
            url:'data.json'
        })
        .success(function(response){
                $scope.blogposts = $filter('filter')(response, {post_title:$rootScope.blogSearch},{post_content:$rootScope.blogSearch},{post_category:$rootScope.blogSearch});

            console.log($scope.blogposts);  
        })
     });

Answer 1

修改：

过滤器有些问题。请尝试以下代码。

//  $scope.blogposts = $filter('filter')(response, { 'post_title': $rootScope.blogSearch }, { 'post_content': $rootScope.blogSearch }, { 'post_category': $rootScope.blogSearch });
                $scope.blogposts = [];
                for (var i = 0; i < response.length; i++)
                {
                    if(response[i].post_title == $rootScope.blogSearch || response[i].post_content == $rootScope.blogSearch ||response[i].post_category == $rootScope.blogSearch)
                    {
                        $scope.blogposts.push(response[i]);
                    }
                }
                console.log($scope.blogposts);

如何使用$ filter（'filter'）过滤AngularJS中的多个字段

1 个答案: