根據ng-change函數更改ng-repeat的值

Question

我在文本列表中輸入日期範圍，因此根據日期範圍從數據庫中獲取數據。現在我正在用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>