2016-10-25 16 views
0

私はAngularJSで働いており、カレンダーから選択した期間に応じてフィルタを追加する必要があります。私の日付は "from"と "to"の2つのフィールドに入っており、json配列で来る有効期限に従ってレコードを表示する必要があります。2つの日付間でレコードをフィルタリングする方法は?

ユーザが日付範囲を選択して検索をクリックすると、その2つの日付の間で選択されたレコードを取得する必要があります。これはコントローラファイルのjsで、この形式で開始日と終了日を取得します "yyyy-mm-dd "。助けてください。

localStorageService.set('usersOpen', users.openUsers); 
    localStorageService.bind($scope, 'usersOpen'); 

users.myUsers = myUsers; 
     function myUsers(start_date,end_date){ 
      DataService.myOpenUsers() 
       .then(function successCallback(response) { 
       $scope.usersOpen.length = 0; 
       $scope.usersOpen.push({'data': response.data.results}); 
      }, function errorCallback(response) { 

      }); 

私はこのjsonレスポンスを取得しています。

{ 
    "results": [{ 
    "id": "999896", 
    "description": "Description Testingggg", 
    "picturesUrl": [], 
    "assigID": [{ 
     "userId": "67767776", 
     "email": "[email protected]", 
     "firstName": "test", 
     "lastName": "User", 
     "pictureUrl": "", 
     "notifyStatus": "None", 

    }], 
    "expiryDate": "2016-10-14T17:48:50.100Z", 
    "createdUserId": "8887900", 
    "status": "Open", 
    "dtModified": "2016-10-14T12:21:27.431Z" 
    },{ 
    "id": "999897", 
    "description": "New Tested Description", 
    "picturesUrl": [], 
    "assignedTo": [{ 
     "userId": "887997", 
     "email": null, 
     "firstName": "testing", 
     "lastName": "users2", 
     "pictureUrl": null, 
     "notifyStatus": "None", 
     "devices": [] 
    }, { 
     "userId": "887997", 
     "email": "[email protected]", 
     "firstName": "Testing", 
     "lastName": "User2", 
     "pictureUrl": "", 
     "notifyStatus": "None", 

    }], 
    "expiryDate": "2016-10-11T09:46:09.100Z", 
    "createdUserId": "887997", 
    "status": "Open", 
    "location": { 
     "lat": 12.1, 
     "lon": -3.1 
    }, 
    "dtModified": "2016-10-11T09:36:30.217Z" 
    }] 
} 

これは、レコードを取得するhtmlです。

<ul>       
<li ng-repeat="users in usersOpen[0].data track by $index" class="{{users.status}} {{yit.id}}">       
<div class="content-box"> 
<div class="text-box"> 
{{users.description}} 
</div> 
{{users.expiryDate}}  
</div> 
{{users.firstName}} 
</li> 
</ul> 
+0

は、あなたがしようとすると、この例のようにカスタムフィルタを使用することができます...あなたが望むものを達成するための多くの方法があります。http://stackoverflow.com/questions/25515431/ng -repeat-filtering-data-by-date-range –

答えて

1

あなたは、フィルタ方式を使用して、フィルタを定義することができます

angular.module('app').filter('dateBetween', function() { 
    return function(data, config) { 
     if(!angular.isArray(data)) return data; 
     var result = []; 
     var start = config.start; 
     var end = config.end; 
     var dateProperty = config.dateProperty; 
     data.forEach(function(chunk) { 
      if((chunk[dateProperty].getTime() <= end.getTime() && check.getTime() >= start.getTime()) 
       result.push(chunk); 
     }); 

     return result; 
    } 
) 

がたstartDate、しているあなたは、あなたのhtmlコードにフィルタを適用することができ、あなたは$スコープusersOpenでモデルを持っていると言う、とendDateにまた、プロパティ同じコントローラ(I'dontは、あなたが日付を取得するために使用されるロジックを知っている)から:フィルタは、私はフィルタリングを適用するために(私が思う明らかである)リンクされて

<ul> 
    <li ng-repeat="user in usersOpen | dateBetween : { start : startDate, end : endDate }"> {{ user.name }} ... </li> 
</ul> 

usersOpenは、ユーザーの配列でなければなりません。

+0

どのように私はこれを私のhtmlで使うことができますか?そしてそのフィルタを定義する必要がある場所は、有効期限の日付と一致します。 –

0

  var product_data = [{ 
 
      "id": "999896", 
 
      "description": "Description Testingggg", 
 
      "picturesUrl": [], 
 
      "assigID": [{ 
 
       "userId": "67767776", 
 
       "email": "[email protected]", 
 
       "firstName": "test", 
 
       "lastName": "User", 
 
       "pictureUrl": "", 
 
       "notifyStatus": "None", 
 

 
      }], 
 
      "expiryDate": "2016-10-14T17:48:50.100Z", 
 
      "createdUserId": "8887900", 
 
      "status": "Open", 
 
      "dtModified": "2016-10-14T12:21:27.431Z" 
 
      }, { 
 
      "id": "999897", 
 
      "description": "New Tested Description", 
 
      "picturesUrl": [], 
 
      "assignedTo": [{ 
 
       "userId": "887997", 
 
       "email": null, 
 
       "firstName": "testing", 
 
       "lastName": "users2", 
 
       "pictureUrl": null, 
 
       "notifyStatus": "None", 
 
       "devices": [] 
 
      }, { 
 
       "userId": "887997", 
 
       "email": "[email protected]", 
 
       "firstName": "Testing", 
 
       "lastName": "User2", 
 
       "pictureUrl": "", 
 
       "notifyStatus": "None", 
 

 
      }], 
 
      "expiryDate": "2016-10-11T09:46:09.100Z", 
 
      "createdUserId": "887997", 
 
      "status": "Open", 
 
      "location": { 
 
       "lat": 12.1, 
 
       "lon": -3.1 
 
      }, 
 
      "dtModified": "2016-10-11T09:36:30.217Z" 
 
      }]; 
 

 
      var startDate = new Date("2016-10-04"); 
 
      var endDate = new Date("2016-10-14"); 
 

 
      var resultProductData = product_data.filter(function(a) { 
 
      return new Date(a.expiryDate) >= startDate && new Date(a.expiryDate) <= endDate 
 
      }); 
 
      console.log(resultProductData);

+0

どのように配列のすべてのレコードを返すことができますか? –

関連する問題