Geek Answers Handbook

AngularJS: filter in the controller across the entire field except for one field

In my angularjs application, I get the following sample data through json:

{"id":"1a", "name": "aaa", "emails": {{"123@123.com"}, {"123@123.info"}}},
{"id":"2a", "name": "aba", "emails": {{"23@123.com"}, {"3@123.info"}}},
{"id":"3a", "name": "aab", "emails": {{"3@123.com"}, {"3@123.info"}}},

and for performance reasons, I did not use a filter for ng-repeat, but I use the ng-show scheme ...

therefore, in the controller I have this code (search is my input value):

  $scope.$watch('search', function(newVal, oldVal) {
    $scope.filteredArray = $filter('filter')($scope.users, $scope.search, newVal);
  });

but it searches even in id, for example, I enter a and get it from id, but I do not need the field identifier here ...

So, how to search for a filter only in certain fields?

+4
source share
4 answers

, , $filter('filter') . , JSON, :

function contains(src, value, except) {
  var key;
  switch(typeof src) {
    case 'string':
    case 'number':
    case 'boolean':
      return String(src).indexOf(value) > -1;
    case 'object':
      except = except || [];
      for(key in src) {
        if( src.hasOwnProperty(key) &&
            except.indexOf(key) < 0 &&
            contains(src[key], value, except)
        ) {
          return true;
        }
      }
  }
  return false;
}

angular.module('app', []).
  factory('appService', function() {
    var data = [
      {"id":"1a", "name": "aaa", "emails": ["123@123.com", "123@123.info"]},
      {"id":"2a", "name": "aba", "emails": ["23@123.com", "3@123.info"]},
      {"id":"3a", "name": "aab", "emails": ["3@123.com", "3@123.info", ["1@123.com", "2@123.info"]]}
    ];
    return {
      getFilteredData: function(filter, except) {
        return filter ? data.filter(function(item) {
          return contains(item, filter, except)
        }) : data.slice(0);
      }
    }
  }).
  controller('appController', ['$scope', 'appService', function($scope, appService) {
    $scope.search = '';
    $scope.$watch('search', function(val) {
      $scope.data = appService.getFilteredData(val, ['id']);
    });
  }]);
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="appController">
    <input ng-model="search" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"/>
    <ul>
      <li ng-repeat="item in data">{{::item}}</li>
    </ul>
  </body>

</html>
Hide result

, , ( ['id'])

№ 1: - - Angular, .

№ 2: , debouncing .

№ 3: , ( {{::item}}) , , Angular.

+5

, . , angularjs : .

, ng-repeat x in data | myFilter , , .

, OP.

, , .

, .

, 3000+ , , angularjs.

, : crossFilter

: () . , , , , 750 , , : var filterTextTimeout=750;

EDIT: , angularjs > 1.2 $timeout

debounce ng-model

crossFilter, ng- crossfilter.

, , , ( ) .

, RegExp, InArray Filter, , ..

+2

, .

angular.module("app", []).controller("ctrl", ["$scope", "$filter", function ($scope, $filter) {
    $scope.users = [{
        "id": "1a",
            "name": "aaa",
            "emails": ["123@123.com", "123@123.info"]
    }, {
        "id": "2a",
            "name": "aba",
            "emails": ["23@123.com", "3@123.info"]
    }, {
        "id": "3a",
            "name": "aab",
            "emails": ["3@123.com", "3@123.info"]
    }];

    $scope.$watch('search', function (newVal, oldVal) {
        //use function to implement a specific expression
        var expression = function (value, index) {
            fields = ['name', 'emails'];
            for (var i in fields) {
                field = fields[i];
                query = {}; //create an expression
                query[field] = $scope.search;
                r = $filter('filter')([value], query);
                if (r.length > 0) return true;
            }
            return false;
        }
        $scope.filteredArray = $filter('filter')($scope.users, expression)
    });
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">Search:
        <input type="text" ng-model="search">
        <div ng-repeat="x in filteredArray">{{x}}</div>
    </div>
</div>
Hide result
+1

, . , . , newVal :

{
  name: someVal,
  emails: otherVal
}

name emails, id. id, , ( , id).

:

angular.module("app", []).controller("ctrl", ["$scope", "$filter", function($scope, $filter){
  $scope.data = [
    {"id":"1a", "name": "aaa", "emails": ["123@123.com", "123@123.info"]},
    {"id":"2a", "name": "aba", "emails": ["23@123.com", "3@123.info"]},
    {"id":"3a", "name": "aab", "emails": ["3@123.com", "3@123.info"]}
  ];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    Name: <input type="text" ng-model="filter.name"><br>
    Email: <input type="text" ng-model="filter.emails">
    <div ng-repeat="x in data | filter:filter">
      {{x}}
    </div>
  </div>
</div>
Hide result

, . , , filter.name filter.email.

//html
Search Query: <input type="text" ng-model="query">
//js
$scope.$watch('query', function(newVal, oldVal){
    $scope.filter.name=newVal;
    $scope.filter.emails=newVal;
}
-1

More articles:


All Articles