Filter in filters

by mohitagrawalmca

HTML

<div ng-controller="StdController">
  <div><b>Filter in filters</b></div>
  <!-- Approch#1 -->
  <hr/> Exact match search:
  <input type="checkbox" ng-model="IsExactMatch" />
  <br/> Entire column search : &nbsp;
  <input type="textbox" value="" ng-model="stdname.$" placeholder="input value" />
  <br/>
  <br/> Student Name column search by HTML:
  <input type="textbox" ng-model="stdname.StdName" placeholder="input value" />
  <hr/>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | filter:stdname:IsExactMatch">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
  <!-- Approch#2 -->
  <hr/>
  <br/> Student Name column search by function:
  <input type="textbox" ng-model="StdName1" placeholder="input value" />
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | filter:flt">
      <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.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }, {
    StdName: "Manoj",
    StdClass: "Xii"
  }];
  $scope.StdDetails = StdDetails;
  $scope.flt = function(element) {
    if ($scope.StdName1 == undefined || $scope.StdName1 == "") {
      return true;
    } else {
      // /^m/gi =/gi : search in globel and ignore case senstive
      var regExp = new RegExp("^" + $scope.StdName1, "gi");
      var val = element.StdName.match(regExp) ? true : false;
      return val;
    }
  };
});