Changing the values of ng-repeat based on the ng-change function

Question

I am having the textfeilds where i will enter the date rage , so based on the date range the data will be fetched from the database . Now I am having the ng-repeat in view to show the data , So i need to change the data based on the values selected in the date rage . I have tried applying filters but it is not working because it has to hit the database when the values changed. can anyone suggest me solution?

<input ng-model="From_Date" ng-change="setCustomSelect()" type="text" class="form-control" placeholder="Select from  Date" datepicker readonly></input>
<input ng-model="To_Date" ng-change="setCustomSelect()" type="text" class="form-control "placeholder="Select to  Date" datepicker readonly></input>

<tr ng-repeat="user in users">  


            <td >
              {{user.name}}
            </td>              
            <td > 
             {{user.email}}           
            </td>
</tr>

Answer 1

As you stated your getting your data from a database, you should aim to pass the dates to your backend service, query your users by date and then return them.

You can use the ngChange directive on your inputs to call a function defined in your controller, which will in turn get data from your service and update your view with that data.

In your service you can make your request via Angular's $http service, passing the dates as params.

This is the sort of structure you can use:

// app.js
(function() {

  'use strict';

  angular.module('app', []);

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['UserService'];

  function MainController(UserService) {

    // make reference to this for controller as syntax
    var vm = this;

    // define our default dates
    vm.startDate = new Date();
    vm.endDate = new Date();

    // call our activate function
    activate();

    /*
     * @name activate
     * @type function
     *
     * @description
     * Initialises everything we need on startup
     *
     * @return nothing.
     */
    function activate() {

      // get our first set of users 
      // Note: in my opinion you should make use of resolving 
      // the data into the controller so you already have it
      getUsers(vm.startDate, vm.endDate);

    }

    /*
     * @name getUsers
     * @type function
     *
     * @description
     * Checks we have a valid start and end date
     * If we have valid dates, calls _getUsers
     *
     * @param {date} startDate The date to filter from
     * @param {date} endDate The date to filter to
     * @return nothing.
     */
    function getUsers(startDate, endDate) {

      if (!startDate || !endDate) {
        return;
      }

      _getUsers(startDate, endDate);

    }

    /*
     * @name _getUsers
     * @type function
     *
     * @description
     * Gets users from our API via our UserService
     *
     * @param {date} startDate The date to filter from
     * @param {date} endDate The date to filter to
     * @return nothing.
     */
    function _getUsers(startDate, endDate) {

      UserService.getUsers(startDate, endDate).then(function(users) {

        // update users
        vm.users = users;

      }, function(error) {

        // handle error

      });

    }

  }

})();

// user.service.js
(function() {

  'use strict';

  angular.module('app').factory('UserService', UserService);

  UserService.$inject = ['$log', '$q', '$http'];

  function UserService($log, $q, $http) {

    var service = {
      getUsers: getUsers
    };

    return service;

    /*
     * @name getUsers
     * @type function
     *
     * @description
     * Gets users from our API
     *
     * @param {date} startDate The date to filter from
     * @param {date} endDate The date to filter to
     * @return {promise} The result of the $http request
     */
    function getUsers(startDate, endDate) {

      // convert your date to whatever you need
      var startDateTime = startDate.getTime();
      var endDateTime = endDate.getTime();

      $log.debug("Getting users...");

      return $q(function(resolve, reject) {

        $http.get('http://example.com/api/users?startDate=' + startDateTime + '&endDate=' + endDateTime)
          .then(function(response) {

            $log.debug("Successful response getting users...", response);

            return resolve(response.data);

          }, function(error) {

            $log.debug("Failed to get users...", error);

            return reject(error);

          });

      });

    }

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as MainCtrl">

  <form name="dateForm">

    <input type="date" name="startDate" ng-model="MainCtrl.startDate" ng-change="MainCtrl.getUsers(MainCtrl.startDate, MainCtrl.endDate)">

    <input type="date" name="endDate" ng-model="MainCtrl.endDate" ng-change="MainCtrl.getUsers(MainCtrl.startDate, MainCtrl.endDate)">

  </form>

  <table>
    <tbody>
      <tr ng-repeat="user in MainCtrl.users">
        <td>
          {{user.name}}
        </td>
        <td>
          {{user.email}}
        </td>
      </tr>
    </tbody>
  </table>
  
</div>