$ filter ('filter')를 사용하여 AngularJS의 여러 필드를 필터링하는 방법

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" 
    }, 
    ] 

는

012,351을 app.js 6,

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