Search code examples
javascriptangularjsangularjs-ng-repeatangularjs-filter

AngularJS Filter parameter with undefined


I made filter for search in table data, but the parameter always is 'undefined'

I use it with ng-repeat like this

<input type="text" ng-model="searchText"  class="form-control" translate="Search">
<tr ng-repeat="g in StudentList  | SearchFilter:searchText >

and the filter:

app.filter('SearchFilter', function () {
    return function (input, word) {
        if (word == undefined || word == '')
            return input;
        // filtering ...
    }
});

I use AngularJS v1.5.8 on chrome browser


Solution

  • To filtering a normal object you don't need a custom filter. just use filter:searchText like this example:

    var app=angular.module('app',[])
    app.controller('Ctrl',function($scope){
    $scope.StudentList=[
      { id: 1, name: 'John', address: 'Highway 71'},
      { id: 2, name: 'Peter', address: 'Lowstreet 4'},
      { id: 3, name: 'Amy', address: 'Apple st 652'},
      { id: 4, name: 'Hannah', address: 'Mountain 21'},
      { id: 5, name: 'Michael', address: 'Valley 345'},
      { id: 6, name: 'Sandy', address: 'Ocean blvd 2'},
      { id: 7, name: 'Betty', address: 'Green Grass 1'},
      { id: 8, name: 'Richard', address: 'Sky st 331'},
      { id: 9, name: 'Susan', address: 'One way 98'},
      { id: 10, name: 'Vicky', address: 'Yellow Garden 2'},
      { id: 11, name: 'Ben', address: 'Park Lane 38'},
      { id: 12, name: 'William', address: 'Central st 954'},
      { id: 13, name: 'Chuck', address: 'Main Road 989'},
      { id: 14, name: 'Viola', address: 'Sideway 1633'}
    ];
    })
    table{
    border-collapse:collapse;
    width:100%
    }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <div ng-app="app" ng-controller="Ctrl">
      <input ng-model="searchText">
      <table border=1>
        <tr><th>Id</th><th>Name</th><th>Ardress</th></tr>
        <tr ng-repeat="g in StudentList|filter:searchText"><td>{{g.id}}</td><td>{{g.name}}</td><td>{{g.address}}</td></tr>
      </table>
    </div>