【问题标题】:How to filter on multiple fields in AngularJS using $filter('filter')如何使用 $filter('filter') 过滤 AngularJS 中的多个字段
【发布时间】:2017-12-11 03:38:43
【问题描述】:

我正在创建一个使用 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>

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

数据.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);  
        })
     });

【问题讨论】:

标签: angularjs angular-filters


【解决方案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);

【讨论】:

  • 更改过滤器后,我可以看到正确搜索的结果。例如:“业务”
猜你喜欢
  • 2021-11-02
  • 2013-02-22
  • 1970-01-01
  • 2022-06-22
  • 2014-05-16
  • 1970-01-01
  • 2021-09-05
  • 2018-09-02
  • 2018-12-30
相关资源
最近更新 更多