use filter in controller & Infinite Scrolling with ng-repeat :)

created custom directive for infinite scrolling , can be used while iterating huge data using ngRepeat :) Happy coding

by Samar Pattanayak

HTML

<div ng-app="myApp">
  <div ng-controller="myController">
    <input type="text" ng-model="uname" ng-show=false placeholder="Type here" ng-change="filterCall(uname)" ng-init2="filterCall(uname)" />
    <p>
      We loaded only 7 peaople initiallty, when you scroll down it will display more records
    </p>
    <strong>Employess with name and age !!! </strong>

    <div id="count"></div>
    <div class="cssdiv" scroll-directive id="divScroll" ng-init="loadmore()">
      <table class="cssdiv">
        <tr ng-repeat="u in filterUsers">
          <td><strong>({{$index+1}})</strong></td>
          <td>{{u.name}}</td>
          <td>{{u.age}}</td>
          <td style="font-style: italic;">{{u.hobby}}</td>
        </tr>
      </table>

    </div>
    <strong>a different examaple</strong>
    <div class="cssdiv" scroll-directive>
      Angular uses dirty checking to keep track ################## of all the changes in app. This means it will have to go through every watcher to check if they need to be updated (call the digest cycle). If one of the watcher is relied upon by another watcher,
      Angular would have to re-run the digest cycle again, to make sure that all of the changes has propagated. It will continue to do so, until all of the watchers have been updated and app has stabilized. Even though running JavaScript in modern browsers
      is really fast, in Angular it is fairly easy to add so many watchers that you app will slow down to a crawl. It will continue to do so, until all of the watchers have been updated and app has stabilized. Even though running JavaScript in modern
      browsers is really fast, in Angular it is fairly easy to add so many watchers that you app will slow down to a crawl. Keep in mind the following when implementing or refactoring an Angular app.
    </div>
  </div>
</div>

CSS

.cssdiv {
  border-bottom: 0.1px solid green;
  margin-bottom: 15px;
  margin-top: 15px;
  height: 200px;
  width: 350px;
  overflow: auto;
}

table {
  border-bottom: 0.1px solid green;
  margin-bottom: 15px;
  margin-top: 15px;
  height: 200px;
  overflow: auto;
  width: 350px;
}

td {
  height: 28px;
  border-bottom: 0.2px solid gray;
  //list-style:none;
  width: auto;
  margin-left: 15px;
  background-color: #e6faff;
}

JavaScript

var app = angular.module("myApp", []);
app.controller("myController", function($scope, $interval, $filter) {
  var users = [{
    name: "Ragini",
    age: 23,
    hobby: "Dancer"
  }, {
    name: "Raghu",
    age: 26,
    hobby: "Devil"
  }, {
    name: "Vimal",
    age: 29,
    hobby: "Tax Calculator"
  }, {
    name: "Rupali",
    age: 25,
    hobby: "Foodie"
  }, {
    name: "Bijita",
    age: 20,
    hobby: "Singer"
  }, {
    name: "jaydev",
    age: 23,
    hobby: "Martyr"
  }, {
    name: "Biji",
    age: 26,
    hobby: "Goddess"
  }, {
    name: "Srima",
    age: 29,
    hobby: "Traveller"
  }, {
    name: "Amit",
    age: 25,
    hobby: "Photographer"
  }, {
    name: "Sipak",
    age: 20,
    hobby: "Lier"
  }, {
    name: "Mayuri",
    age: 23,
    hobby: "Beautiful"
  }, {
    name: "Baisali",
    age: 26,
    hobby: "Gorgeous"
  }, {
    name: "Rishul",
    age: 29,
    hobby: "Musician"
  }, {
    name: "Apratim",
    age: 25,
    hobby: "Banker"
  }, {
    name: "Sourav",
    age: 20,
    hobby: "Lover"
  }]
  $interval(function() {}, 1000);
  $scope.filterCall = function(username) {
      //filtered content//service//filtername//inputvalue
      //$scope.users=$filter('myFilter')($scope.users)
      console.log(username)
      var fOutPut = $filter('filter')(users, username);

      fOutPut = $filter('orderBy')(fOutPut, 'name')
      $scope.filterUsers = fOutPut;
    }
    //$scope.filterUsers= users;
  var countN = 0
  $scope.loadmore = function() {
    console.log("inside more")

    $scope.filterUsers = users.slice(0, countN += 7)
  }
  //$scope.loadmore();
  
  $scope.ind= true;
})
app.filter("myFilter", function() {
  var filtercount = 0;
  return function(input) {
    //console.log(input)
    return input.map(function(val) {
      filtercount++;
      document.querySelector('#count').innerHTML = (
        'Filter count: ' + filtercount
      );
      return val
    })


  }
})
app.directive("scrollDirective", function($timeout) {
    return...