CODEWITHSUNDEEP
angularjsfilter
totothegreat
totothegreat

Reputation: 1643

Angular filter match by character?

I have angular 1.3, and i have the following array:

     data : [
        {
           id :2,
           name : "danny davids",
           age :9

        },
{
           id :3,
           name : "sanny gordon",
           age :9

        }
     ]

I want the filter to do the follwing:

When i start writing the word "s", i want the danny davids to disappear, right now the default behavior is, both of them are still shown (the s is in the end of the last name of danny).

strict mode is something that i dont want to use, the behavior i want is:

if there is no value in the input, i want to see all, if i start to write i want to see the exact one by firstName/lastName.

is there a default filter for this in angular 1.3?

Upvotes: 4

Views: 12307

Answers (5)

Majedur
Majedur

Reputation: 3242

You can filter match by any characters:

Sample condition:

yourDataList.display.toLowerCase().indexOf(searchData) !== -1;

Example: 

 function createFilterForAnycharacters(searchData) {
        var lowercaseQuery = query.toLowerCase();
        return function filterFn(yourDataList) {
            return (yourDataList.display.toLowerCase().indexOf(searchData) !== -1);
        };
    }

Upvotes: 4

Manoj Kumar Singh
Manoj Kumar Singh

Reputation: 29

Use this custom filter to get result match starting characters

app.filter('startsWithLetter', function () {
    return function (items, letter) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.substr(0,letter.length).toLowerCase() == letter.toLowerCase()) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

Upvotes: 3

Girdhar Singh Rathore
Girdhar Singh Rathore

Reputation: 5615

it works for your scenario, you can create custom filter

below is html code

<div ng-app="app">
    <div ng-controller="PersonCtrl as person">
        <input type="text" ng-model="letter" placeholder="Enter a letter to filter">
        <ul>
           <li ng-repeat="a in person.data | startsWithLetter:letter"> 
                {{a.name}}
            </li> 
        </ul>
    </div>
</div>

js code

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

app.filter('startsWithLetter', function () {
    return function (items, letter) {
        var filtered = [];
        var letterMatch = new RegExp(letter, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (letterMatch.test(item.name.substring(0, 1))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

app.controller('PersonCtrl', function () {

    this.data = [
        {
           id :2,
           name : "danny davids",
           age :9

        },
        {    
           id :3,
           name : "sanny gordon",
           age :9

        }
     ]

});

Upvotes: 1

ryanyuyu
ryanyuyu

Reputation: 6486

I suggest using $filter by a custom filter function for you ng-repeat. According to the documentation, $filter expects

function(value, index, array): A predicate function can be used to write arbitrary filters. The function is called for each element of the array, with the element, its index, and the entire array itself as arguments.

And only elements that return true with be shown. So all you have to do is write that function.

Your filter function might look like this:

$scope.filterData = function (obj) {
  return anyNameStartsWith(obj.name, $scope.searchFilter);
};

function anyNameStartsWith (fullname, search) {

  //validate if name is null or not a string if needed
  if (search === '')
    return true;

  var delimeterRegex = /[ _-]+/;
  //split the fullname into individual names
  var names = fullname.split(delimeterRegex);

  //do any of the names in the array start with the search string
  return names.some(function(name) {
      return name.toLowerCase().indexOf(search.toLowerCase()) === 0;
  });
}

Your HTML might look something like this:

<input type="text" ng-model="searchFilter" />
<div ng-repeat="obj in data | filter : filterData">
    Id: {{obj.id}}
    Name: {{obj.name}}
</div>

A demo via plnkr

Upvotes: 4

Karthikvenkat86
Karthikvenkat86

Reputation: 84

Need to create a custom filter function to do this. There is no default method to match first character in angular.

https://docs.angularjs.org/guide/filter

Upvotes: 0

Related Questions