Problem with Uppercase and Lowercase in Angularjs

Question

Problem with Uppercase and Lowercase in Angularjs

Navigation

#1 by (3 votes)

1

Personal follow the example of a script on stackoverflow.com as follows the link below: [link]

I happen to be having problems with words that are capitalized eg a word that is "Protocol" and I type "protocol", the filter does not find it.

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.model = {
        filter: ''
    };
});

app.directive('myHtmlFilter', [function() {
    return {
        restrict: 'A',
        scope: {
          filter: '=myHtmlFilter',
          element: '@'
        },
        link: function(scope, elem, attrs) {
          scope.$watch('filter', function(newval, oldval) {
            elem
              .find('ul>li')
                  .hide()
                  .find(scope.element)
                  .filter(':contains("'+scope.filter+'")')
               .parent()
                  .show();
          })
        }
    }
}]);

Index.html

<input type="text" ng-model="model.filter" />

<div my-html-filter="model.filter" element="h2">
  <ul>
    <li id="1">
        <h2>Protocolo</h2>
        <p>The Message...</p>
    </li>
    <li id="2">
        <h2>My second Post</h2>
        <p>The Message...</p>
    </li>
    <li id="3">
        <h2>My third Post</h2>
        <p>The Message...</p>
    </li>
  </ul>
</div>

javascript jquery angularjs filtro filter

asked by anonymous 31.01.2015 / 23:35

1 answer

PostgreSQL Unilateral Replication Select City and State [Filter]

score 3 · Answer 1

The problem is on the line:

.filter(':contains("'+scope.filter+'")')

The jQuery :contains selector makes case-sensitive distinction. The .filter() function accepts as a parameter a callback that you can use to evaluate whether the element meets your criteria and whether or not be added to the list of filtered items.

An example callback that does a case insensitive comparison:

.filter(function(){ return $(this).text().toLowerCase().indexOf(scope.filter) > -1 })

In your directive it would look like this:

app.directive('myHtmlFilter', [function() {
    return {
        restrict: 'A',
        scope: {
          filter: '=myHtmlFilter',
          element: '@'
        },
        link: function(scope, elem, attrs) {
          scope.$watch('filter', function(newval, oldval) {
            elem
              .find('ul>li')
                  .hide()
                  .find(scope.element)
                  .filter(function(){ return $(this).text().toLowerCase().indexOf(scope.filter) > -1 })
               .parent()
                  .show();
          })
        }
    }
}]);