AngularJS Create Dynamic Filter using Function for ngRepeat

AngularJS Create Dynamic Filter using Function for ngRepeat.md

Creat a dynamic filter function for ngRepeat outside Angular controller scope

The filter function is run against a dynamically changed object.

http://jsfiddle.net/gh/gist/library/pure/6c6823e0600b707bce83/

fiddle.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<div ng-app="myapp" ng-controller="parentCtrl">
  <input type="button" value="Filter" onClick="startFilter()">
  <div>
    <span ng-bind="filtered_results.length"></span>
  </div>
  <table id="searchObjResults">
    <tr><th>Name</th><th>Phone</th></tr>
    <tr ng-repeat="friendObj in friends | filter:search as filtered_results">
      <td>{{friendObj.name}} {{friendObj.year}}</td>
      <td>{{friendObj.phone}}</td>
    </tr>
  </table>
</div>

fiddle.js

var app=angular.module('myapp',[]);
app.controller('parentCtrl',function($scope) {
  $scope.friends = [{name:'John', phone:'555-1276',id:'1', year: '2013'},
                   {name:'Mary', phone:'800-BIG-MARY',id:'2', year: '2014'},
                   {name:'Mike', phone:'555-4321',id:'3', year: '2015'},
                   {name:'Adam', phone:'555-5678',id:'4', year: '2016'},
                   {name:'Julie', phone:'555-8765',id:'5', year: '2017'},
                   {name:'Juliette', phone:'555-5678',id:'6', year: '2018'}];
  $scope.search_vars = {};
       
  $scope.search =function(item) {
    var is_keep = true;
    var o = $scope.search_vars;
    if (!is_Obj_Empty(o)) {
      for (var key in o) {
        switch (key) {
          case 'year': is_keep = (item[key] <= o[key]) ? false : is_keep;
            break;
          default: is_keep = (item[key] != o[key]) ? false : is_keep;
        }
      }
    }
   return is_keep;
  };
});

function is_Obj_Empty(obj) {
  // Determin if an object is empty
  return Object.keys(obj).length === 0;
}

function startFilter() {
  var appElement = document.querySelector('[ng-app=myapp]');
  var $scope = angular.element(appElement).scope();
  
  $scope.$apply(function() {
    // change filter criteria
    $scope.search_vars = {year: 2015, phone: '555-8765'};
  });
}

fiddle.manifest

normalize_css: no
panel_jss: 0
panel_css: 0
wrap: b