Custom filter

HTML

<div ng-controller="StdController">
  <div><b>Custom filter in filters</b></div>
  <!-- Approch#3 -->
  <br/> Student class column search by using custom filter:
  <input type="textbox" maxlength=1 ng-model="stdinput" placeholder="input value" />
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | startWith:stdinput:1">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>

</div>

CSS

th {
  border: 1px solid;
}

td {
  border: 1px solid;
}

table {
  border: 1px solid;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.filter('startWith', function() {
  return function(items, char, columnIndex) {
    if (columnIndex == undefined || columnIndex == null) {
      columnIndex = 0;
    }
    if (items == undefined || items == null) {
      return items;
    } else {
      var filtered = [];
      var match = new RegExp(char, 'i');
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (match.test(item[Object.keys(item)[columnIndex]].substring(0, 1))) {
          filtered.push(item);
        }
      }
      return filtered;
    }
  };
});
myApp.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }, {
    StdName: "Manoj",
    StdClass: "Xii"
  }];
  $scope.StdDetails = StdDetails;
});