ng-change関数に基づいてng-repeatの値を変更する

Question

私は日付怒りを入力するtextfeildを持っているので、日付範囲に基づいてデータがデータベースからフェッチされます。今私はデータを表示するために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サービスでリクエストをparamsとして渡すことができます。

これは、あなたが使用することができる構造の一種である：

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