Angular filter match by character?

Question

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?

Answer 1

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);
        };
    }

Answer 2

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