How does a filter work in AngularJS?

Question

I have a table generated using ng-repeat(from an array of objects).

I would like to filter it using the search text box.

The objects contained in my array have deep properties.

I don’t know why and how, but the filter only works in the email field, which is as deep as the other properties.

I use this search form:

<input type="text" name="search" ng-model="searchText" />
...
<tr ng-repeat="x in obj | filter:searchText track by $index">
  ...
</tr>

plunker

EDIT:

This answer helps me understand why it does not work. Does anyone know how I can get around the $ filter check in a filter?

I use $ because I follow the Google Contact API.

Answer 1

email , address $ char.

, , , ng-repeat.

, :

JS

app.filter('customFilter', function() {
  return function(items, keyword) {
    if (!keyword || keyword.length === 0) return items;

    return items.filter(function(item){
      var phrase = keyword.$.toLowerCase();
      return item.gd$name.gd$fullName.$t.toLowerCase().includes(phrase) || 
        item.gd$name.gd$familyName.$t.toLowerCase().includes(phrase) || 
        item.gd$name.gd$givenName.$t.toLowerCase().includes(phrase) ||
        item.gd$email[0].address.toLowerCase().includes(phrase) ||
        item.gd$phoneNumber[0].$t.toLowerCase().includes(phrase) ||
        (!!item.gd$organization[0].gd$orgTitle && item.gd$organization[0].gd$orgTitle.$t.toLowerCase().includes(phrase)) ||
        (!!item.gd$organization[0].gd$orgName && item.gd$organization[0].gd$orgName.$t.toLowerCase().includes(phrase));
    });
  }
});

HTML

<tr ng-repeat="x in obj | customFilter:searchText">

, null. , , .

, .

plunk

Answer 2

ngFilter , , $, , AngularJS ($) ($$) .

Answer 3

$ - , Angular. Angular . $ JSON:

ng-repeat Object.keys($scope.object) $scope.object.

JSFiddle

Answer 4

, API- API, AngularJS, , <<20 > $. , , !:)

. $scope.obj :

$scope.obj = $scope.obj.map(function(cur) {
  return renameKey(cur)
})

, renameKey, , Array Object , x , $

function renameKey(cur) {
  if(isArray(cur)) {
    cur.forEach(function(obj) {
      obj = renameKey(obj)
    })
  } else if (isObject(cur)) {
    for (let key in cur) {
      if(key.charAt(0) === '$') {
        cur['x'+key] = cur[key];
        delete cur[key];
      }
      cur[key] = renameKey(cur[key])
    }
  } 
  return cur
}

function isObject(obj) {
   return obj && (typeof obj === "object");
}

function isArray(obj) { 
  return isObject(obj) && (obj instanceof Array);
}

, ! , , x$t $t HTML !

Answer 5

, 50, , - , $, . , . , .

Answer 6

, :

$scope.obj=[{firstName:'Jeet',lastName:'kumar'},{firstName:'test1',lastName:'dev'},{firstName:'test2',lastName:'other'}];

<input type="text" name="search" ng-model="searchText" />

Datatable filter by index 'firstName'

<tr ng-repeat="x in obj | filter:{firstName:searchText}">
 <td>{{x.firstName}}</td>
<td>{{x.lastName}}</td>
</tr>

Datatable filter all over the index

<tr ng-repeat="x in obj | filter:searchText">
 <td>{{x.firstName}}</td>
<td>{{x.lastName}}</td>
</tr>

Product Description:

filter:{name:searchText}
filter on the basis of 'firstName' index from your $socpe.obj array