Having trouble getting two different filters to work properly when filtering data in AngularJs

Question

Having trouble getting two different filters to work properly when filtering data in AngularJs

I have created a plunkr to demonstrate my current situation:

The user is required to type a word into the textbox, and upon clicking the button, an angular service retrieves data from a DB based on the input text. The retrieved data is then displayed in a table.

I am currently working on implementing a filter search. The search can be performed on a person's information such as:

first_name
middle_name
first_surname
second_surname

I have incorporated two visual filters:

1) Visual Filter for hiding and showing results: (defined in appCtrl.js)

$scope.changedValue=function(){
    var condition = $scope.filter.condition;
    $scope.Model.filteredlist = filterFilter($scope.Model.expenses,function(value, index, array){
      var fullname = (value.first_name+' '+value.middle_name+' '+value.first_surname+' '+value.second_surname).toLowerCase();
      if (fullname.indexOf(condition.replace(/\s\s+/g, ' ').toLowerCase()) > -1 ) {
        return array;
      }
    });
    if (typeof $scope.Model.filteredlist != 'undefined') { // When page loads for first time
      $scope.setPage();
    }
  }

2) Visual Filter for highlighting the results: (defined in appDrct.js)

app.directive('highLight', function ($document, $sce) {
  var component = function(scope, element, attrs) {

    if (!attrs.highlightClass) {
      attrs.highlightClass = 'angular-highlight';
    }

    var replacer = function(match, item) {
      return '<span class="'+attrs.highlightClass+'">'+match+'</span>';
    }

    var tokenize = function(keywords) {
      keywords = keywords.replace(new RegExp(',$','g'), '').split(' ');
      var i;
      var l = keywords.length;
      for (i=0;i<l;i++) {
        keywords[i] = keywords[i].replace(new RegExp('^ | $','g'), '');
      }
      return keywords;
    }

    scope.$watch('keywords', function(newValue, oldValue) {
      console.log("new: " + newValue + " old " + oldValue);

        var tokenized = tokenize(newValue);
        var regex     = new RegExp(tokenized.join('|'), 'gmi');

        if(newValue.length>=1 || oldValue.length>=1){
          for(i=0;i<=1;i++){
            element[0].cells[i].innerHTML = element[0].cells[i].innerText.replace(regex, replacer);
          }
        }
    });
  }
  return {
    link:       component,
    replace:    false,
    scope:      {
      keywords:  '=highLight'
    }
  };
});

The html calling those filters: (defined in table.html)

<input type="text" class="form-control" id="filter-list" placeholder="Name(s) and/or Lastname(s)" ng-model="filter.condition" ng-change="changedValue()">
......
<tr ng-repeat="expense in Model.filteredlist | pagination: pagination.currentPage : numPerPage" x-high:light="filter.condition">
        <td>{{expense.first_name}} {{expense.middle_name}}</td>
        <td>{{expense.first_surname}} {{expense.second_surname}}</td>
        <td>{{expense.age}}</td>
      </tr>

However, I encountered some issues where certain data is not rendered correctly when there are missing values for middle_name or second_surname.

To replicate the issue, enter "Lora" in the search box, then delete it. You will notice that some data is not displayed correctly. Also, if you type "Loras" and then erase the "s", the word does not highlight again until you continue erasing characters.

I suspect the issue lies within the $scope.changeValue filter, but I'm unsure of how to resolve it.

Any suggestions or ideas?

javascript angularjs angularjs-directive filtering angularjs-filter

Answer 1

Answer №1

The issue lies within the implementation of your highLight directive, as it is attempting to modify its contents without full knowledge of what those contents are...


element[0].cells[i].innerHTML = element[0].cells[i].innerText.replace(regex, replacer);

Ultimately, the problem stems from timing issues. At times, the highLight directive alters the HTML prior to interpolation occurring, resulting in instances such as:


<td class="ng-binding">{{expense.first_name}} {{expense.midd<span class="angular-highlight">l</span>e_name}}</td>

which Angular cannot interpret correctly.

Answer 2

The issue lies within the implementation of your highLight directive, as it is attempting to modify its contents without full knowledge of what those contents are...


element[0].cells[i].innerHTML = element[0].cells[i].innerText.replace(regex, replacer);

Ultimately, the problem stems from timing issues. At times, the highLight directive alters the HTML prior to interpolation occurring, resulting in instances such as:


<td class="ng-binding">{{expense.first_name}} {{expense.midd<span class="angular-highlight">l</span>e_name}}</td>

which Angular cannot interpret correctly.

Answer 3

Answer №2

There appears to be a known issue with Angular that can be found at this link - https://github.com/angular/angular.js/issues/11716

If you replace your {{ }} bindings with ng-bind, the filtering will function as intended -

    <td><span ng-bind="expense.first_name"></span><span ng-bind="expense.middle_name"></span></td>
    <td><span ng-bind="expense.first_surname"></span><span ng-bind="expense.second_surname"></span></td>
    <td><span ng-bind="expense.age"></span></td>

----- UPDATE - Jan,4, 2016 -----

I have not yet found a definitive explanation for this issue. It seems to be linked to how ng-bind is utilized to $watch things compared to how {{ }} is used to $observe. I'm still uncertain about it.

According to Angular best practices - https://github.com/angular/angular.js/blob/2a156c2d7ec825ff184480de9aac4b0d7fbd5275/src/ng/directive/ngBind.js#L16, ng-bind is the preferred method for binding values in scope unless they are DOM attributes, in which case using $observer in the directive could be appropriate. Reference - AngularJS : Difference between the $observe and $watch methods

Another distinction - the {{ }} watcher triggers on every $digest unlike ng-bind, which actively $watch for changes resulting in better performance, despite requiring more html code. Reference - AngularJS : Why ng-bind is better than {{}} in angular?

----- UPDATE - Jan,5, 2016 -----

For the correct answer, please see Pete BD's response below.

Answer 4

There appears to be a known issue with Angular that can be found at this link - https://github.com/angular/angular.js/issues/11716

If you replace your {{ }} bindings with ng-bind, the filtering will function as intended -

    <td><span ng-bind="expense.first_name"></span><span ng-bind="expense.middle_name"></span></td>
    <td><span ng-bind="expense.first_surname"></span><span ng-bind="expense.second_surname"></span></td>
    <td><span ng-bind="expense.age"></span></td>

----- UPDATE - Jan,4, 2016 -----

I have not yet found a definitive explanation for this issue. It seems to be linked to how ng-bind is utilized to $watch things compared to how {{ }} is used to $observe. I'm still uncertain about it.

According to Angular best practices - https://github.com/angular/angular.js/blob/2a156c2d7ec825ff184480de9aac4b0d7fbd5275/src/ng/directive/ngBind.js#L16, ng-bind is the preferred method for binding values in scope unless they are DOM attributes, in which case using $observer in the directive could be appropriate. Reference - AngularJS : Difference between the $observe and $watch methods

Another distinction - the {{ }} watcher triggers on every $digest unlike ng-bind, which actively $watch for changes resulting in better performance, despite requiring more html code. Reference - AngularJS : Why ng-bind is better than {{}} in angular?

----- UPDATE - Jan,5, 2016 -----

For the correct answer, please see Pete BD's response below.

Answer 5

Answer №3

After receiving insightful responses from FrailWords and PeteBD, a new idea struck me, and it turned out to be successful!

The key lies in the concept of interpolation. By referencing the documentation and studying a helpful example on fiddle, I implemented the solution utilizing $interpolate and $eval within a non isolated scope.

var interpolation = $interpolate(element[0].cells[i].innerText);
element[0].cells[i].innerHTML = scope.$eval(interpolation).replace(regex, replacer);

Here is the complete code snippet for the directive:

app.directive('highLight', ['$interpolate', function ($interpolate) {
  var component = function(scope, element, attrs) {

    if (!attrs.highlightClass) {
      attrs.highlightClass = 'angular-highlight';
    }

    var replacer = function(match, item) {
      return '<span class="'+attrs.highlightClass+'">'+match+'</span>';
    }

    var tokenize = function(keywords) {
      keywords = keywords.replace(new RegExp(',$','g'), '').split(' ');
      var i;
      var l = keywords.length;
      for (i=0;i<l;i++) {
        keywords[i] = keywords[i].replace(new RegExp('^ | $','g'), '');
      }
      return keywords;
    }

    scope.$watch(attrs.highLight, function(newValue, oldValue) {
      console.log("new: " + newValue + " old " + oldValue);

        var tokenized = tokenize(newValue);
        var regex     = new RegExp(tokenized.join('|'), 'gmi');

        if(newValue.length>=1 || oldValue.length>=1){
          for(i=0;i<=1;i++){
            var interpolation = $interpolate(element[0].cells[i].innerText);
            element[0].cells[i].innerHTML = scope.$eval(interpolation).replace(regex, replacer);
          }
        }
    });
  }
  return {
    link:       component,
    replace:    false
  };
}]);

This is how the HTML structure should look:

<tr ng-repeat="expense in Model.filteredlist | pagination: pagination.currentPage : numPerPage" x-high:light="filter.condition">
 <td>{{expense.first_name}} {{expense.middle_name}}</td>
 <td>{{expense.first_surname}} {{expense.second_surname}}</td>
 <td>{{expense.age}}</td>
</tr>

Now, everything functions seamlessly. It's truly remarkable and undeniably effective.

Answer 6

After receiving insightful responses from FrailWords and PeteBD, a new idea struck me, and it turned out to be successful!

The key lies in the concept of interpolation. By referencing the documentation and studying a helpful example on fiddle, I implemented the solution utilizing $interpolate and $eval within a non isolated scope.

var interpolation = $interpolate(element[0].cells[i].innerText);
element[0].cells[i].innerHTML = scope.$eval(interpolation).replace(regex, replacer);

Here is the complete code snippet for the directive:

app.directive('highLight', ['$interpolate', function ($interpolate) {
  var component = function(scope, element, attrs) {

    if (!attrs.highlightClass) {
      attrs.highlightClass = 'angular-highlight';
    }

    var replacer = function(match, item) {
      return '<span class="'+attrs.highlightClass+'">'+match+'</span>';
    }

    var tokenize = function(keywords) {
      keywords = keywords.replace(new RegExp(',$','g'), '').split(' ');
      var i;
      var l = keywords.length;
      for (i=0;i<l;i++) {
        keywords[i] = keywords[i].replace(new RegExp('^ | $','g'), '');
      }
      return keywords;
    }

    scope.$watch(attrs.highLight, function(newValue, oldValue) {
      console.log("new: " + newValue + " old " + oldValue);

        var tokenized = tokenize(newValue);
        var regex     = new RegExp(tokenized.join('|'), 'gmi');

        if(newValue.length>=1 || oldValue.length>=1){
          for(i=0;i<=1;i++){
            var interpolation = $interpolate(element[0].cells[i].innerText);
            element[0].cells[i].innerHTML = scope.$eval(interpolation).replace(regex, replacer);
          }
        }
    });
  }
  return {
    link:       component,
    replace:    false
  };
}]);

This is how the HTML structure should look:

<tr ng-repeat="expense in Model.filteredlist | pagination: pagination.currentPage : numPerPage" x-high:light="filter.condition">
 <td>{{expense.first_name}} {{expense.middle_name}}</td>
 <td>{{expense.first_surname}} {{expense.second_surname}}</td>
 <td>{{expense.age}}</td>
</tr>

Now, everything functions seamlessly. It's truly remarkable and undeniably effective.

Having trouble getting two different filters to work properly when filtering data in AngularJs

Answer №1

Answer №2

Answer №3

Similar questions

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

Choosing the image that represents your website in Safari web previews

What is causing the recurring failure of file input changes to take effect?

Problem integrating multer with Express JS and Node JS

What is the best way to create an arrow connecting a parent div to multiple child divs?

Execute the function prior to executing the controller

Learn how to move a div inside another div using drag and drop, ensuring that the entire element moves along with it

Using various jQuery autocomplete features on a single webpage

Why is the Zip archive downloader not functioning properly when using Node.js and Archiver (Unexpected end of archive error)?

Storing User IP Address in Database with Express and Mongoose

Scan for every header tag present and verify the existence of an id attribute within each tag. If the id attribute is absent, insert

What steps should I take to ensure that this modal remains persistent?

Building an expansive navigation menu with react-bootstrap

Achieving cell merging in react-table can be accomplished by utilizing the appropriate

Is there a method to track the progress of webpage loading?

Transferring Data between Rails and Angularjs using JSON

The function cannot be invoked. The 'Boolean' type does not have any call signatures. An error has occurred in the computed property of Vue3

Continuous Scrolling with Callback Function in jQuery

Troubleshooting an Angular.js "Hello World" application that is malfunctioning

I keep encountering an issue with getJson