using custom filter in angular js 1.6.2

Question

The below snippet was working perfectly with angular 1.4.2, however after upgrading the angular js library to 1.6.2.

I have searched the migration/upgrading docs..etc. Not found a solution.

HTML code:

<input ng-model="query" type="text" name="js_filter" >

part of my custom table, tbItems.rows would contain some data in an array/object format

<tr ng-repeat-start="datarow in resultItems = (tbItems.rows | filter:magikFilterQuery ) " >

javascript snippet:

myControllers.controller('myContrBasic', ['$scope', '$http',
    function ($scope, $http) {

    $scope.magikFilterQuery = function (item) {
        var term;
        var part;
        if (angular.isUndefined($scope.query) === false) {
          if ($scope.matchcase === true) {
            term = item.data[3];
            part = $scope.query;
          }
          else {
            term = angular.lowercase(item.data[3]);
            part = angular.lowercase($scope.query);
          }
          if (term.indexOf(part) === -1) {
            return false;
          }
          else {
            return true;
          }
        }
        else {
          return true;
        }
      };

Error after upgrading angular js:

angular.js:14362 Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=magikFilterQueryFilterProvider%20%3C-%20magikFilterQueryFilter
    at http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:6:425
    at http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:44:374
    at Object.d [as get] (http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:42:92)
    at http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:44:436
    at Object.d [as get] (http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:42:92)
    at http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:163:474
    at U (http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:125:13)
    at http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:123:123
    at q (http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:7:351)
    at U (http://localhost/site82/folder/js/angular162/angular.min.js?v=8.2.6:123:102) <!-- ngRepeat: datarow in  (tbItems.rows | magikFilterQuery ) as resultItems -->

Alternatively i have seen the .filter() function being used on some sites.. can i use that... in this case — rjD
– rjD, Commented Mar 6, 2017 at 12:03
myControllers.controller('myContrBasic', ['$scope','$filter', '$http', function ($scope, $filter,$http) { } Do you inject like this? — Jenny
– Jenny, Commented Mar 6, 2017 at 12:03
yes, myControllers.controller('myContrBasic', ['$scope', '$http','$filter', function ($scope, $http, $filter) { — rjD
– rjD, Commented Mar 6, 2017 at 12:05

Gaurav Kumar Singh · Accepted Answer · 2017-03-06 12:04:30Z

1

You need to defined a filter for your function magikFilterQuery like

angular.module('myApp').filter('magikFilterQuery', function() {
  return function(item) {
    var term;
    var part;
    if (angular.isUndefined($scope.query) === false) {
      if ($scope.matchcase === true) {
        term = item.data[3];
        part = $scope.query;
      }
      else {
        term = angular.lowercase(item.data[3]);
        part = angular.lowercase($scope.query);
      }
      if (term.indexOf(part) === -1) {
        return false;
      }
      else {
        return true;
      }
    }
    else {
      return true;
    }
  }
});

answered Mar 6, 2017 at 12:04

Gaurav Kumar Singh

1,5703 gold badges11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rjD Over a year ago

using this am getting the entire object in item , will i have to re-iterate through it again

rjD Over a year ago

ok, i figured out a solution, I have edited the code snippet above.

Collectives™ on Stack Overflow

using custom filter in angular js 1.6.2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related