Question

我正在使用textfeilds输入日期范围，因此根据日期范围，数据将从数据库中获取。现在我正在使用ng-repeat来显示数据，所以我需要根据日期范围中选择的值更改数据。我尝试过应用过滤器，但它不起作用，因为它必须在值更改时命中数据库。谁能建议我解决方案？

<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

当您声明从数据库获取数据时，您应该将日期传递给后端服务，按日期查询用户然后返回。

您可以使用输入上的ngChange指令调用控制器中定义的函数，该函数将从您的服务中获取数据并使用该数据更新您的视图。

在您的服务中，您可以通过Angular的$http服务提出请求，并将日期作为参数传递。

这是您可以使用的结构：

// 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>

根据ng-change功能更改ng-repeat的值

1 个答案: