2016-01-29 3 views
0

Я использую angularJs для разработки гибридного мобильного приложения для IOS и Android. Я получаю данные JSON, как:на основе текущей даты - сортировка данных json при нажатии кнопки

[{"EventId":101,"Title":"No title","Date":"9/8/2015","Time":"12:00 AM","Location":""},{"EventId":120,"Title":"My First Event","Date":"9/15/2015","Time":"12:00 AM","Location":""}] 

Мой вопрос заключается в том, что у меня есть одна кнопка, нажмите на эту кнопку мне нужно коротких моих данных на основе текущей даты. Если я нажму кнопку, он должен показать мне только ту запись, которая соответствует текущей дате.

Я попытался следовать этому link, но он не работает.

Код:

$scope.Schedule = [{"EventId":101,"Title":"No title","Date":"9/8/2015","Time":"12:00 AM","Location":""},{"EventId":120,"Title":"My First Event","Date":"9/15/2015","Time":"12:00 AM","Location":""}]; 

    <ion-content> 
     <ul ng-repeat="member in Schedule"> 
      <li class="item"> 
       <div class="item" style="border-width: 0px; padding : 1px;">{{member.Title}}</div> 
       <div class="item" style="border-width: 0px; padding : 1px;">{{member.Location}}</div> 
       <div class="item" style="border-width: 0px; padding : 1px;">{{member.Time}}{{member.Date}}</div> 
      </li> 
     </ul> 
    </ion-content> 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
    <div class="list"> 
     <a ng-click="setOrder()"> Show today's </a> 
    </div> 
    </ion-footer-bar> 
+0

Вы можете поделиться код, пожалуйста? – xxlali

+0

Я обновил код @xxlali –

ответ

1

Вот working plnkr

Markup

<button ng-show="curDate == ''" type="button" ng-click="filterByCurDate()">Filter By Current Date</button> 
<button ng-hide="curDate == ''" type="button" ng-click="curDate = ''">Clear Filter</button> 
<table> 
    <thead> 
    <tr> 
     <th>EventId</th> 
     <th>Title</th> 
     <th>Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="event in events | filter: {Date: curDate}"> 
     <td>{{event.EventId}}</td> 
     <td>{{event.Title}}</td> 
     <td>{{event.Date}}</td> 
    </tr> 
    </tbody> 
</table> 

Controller Код

$scope.curDate = ''; 
$scope.filterByCurDate = function() { 
    var now = new Date(); 
    $scope.curDate = $filter('date')(now, 'M/dd/yyyy'); 
}; 

$scope.events = [...]; 
+0

Могу ли я переключиться на это, потому что он скрывает все нажатие кнопки, если нет элемента для него. –

+0

Да. Я могу обновить plnkr. Но является ли этот фильтр тем, что вы искали? – o4ohel

+0

Да, я ищу это только. –

0

Если вы хотите заказать записи, основанные на использовании поля даты OrderBy предикат вместо фильтра

Asc заказ

<ANY ng-repeat="record in records | orderBy:'Date'">..</ANY> 

Desc заказ

<ANY ng-repeat="record in records | orderBy:'-Date'">..</ANY> 

Angular DOC: orderBy

0

Вы могли бы попробовать что-то вроде этого:

var today = new Date(), 
    jsonData = JSON.parse('[{"EventId":101,"Title":"No title","Date":"9/8/2015","Time":"12:00 AM","Location":""},{"EventId":120,"Title":"My First Event","Date":"1/29/2016","Time":"12:00 AM","Location":""}]'); 

    today.setHours(0,0,0,0); //we don't need time to compare 

    jsonData.forEach(function(entry) { 
    entry.Date = new Date(entry.Date); 

    if (entry.Date.valueOf()===today.valueOf()){ 
     console.log("Pass: "+entry); 
    } 
    }); 
Смежные вопросы