如何使用离子

时间:2017-03-21 05:41:24

标签: javascript html css ionic-framework ionic2

我有一个屏幕,它会显示包含日期和月份的大量数据。我在列表视图的顶部有两个按钮。 TODAY , TOMORROW

我需要的是:

如果我按today button在我的列表视图中,今天可用的产品必须在列表视图中显示。

如果我按下tomorrow button,明天数据中可用的产品必须显示在我的列表视图中。

我的产品数据来自数据库。

怎么做?请帮帮我!!

来自db的我的json响应:

"allorders": [
    {
      "orderID": "33",
      "customerName": "uwe",
      "orderStatus": "delivering",
      "orderDate": "2017-03-20 04:20:05",
      "dateAdded": "20",
      "monthAdded": "Mar",
      "timeAdded": "04:20 AM",

    }

我的HTML代码:

 <div class="row" style="height: 52px;">
    <div class="col col-50" style="border-right: 1px #ccc solid;     padding-top: 17px;
    padding-left: 63px;">
      <span class="assertive" style="margin: 0px;color: #B90143;">TODAY</span>
    </div>

    <div class="col col-50" style=" padding-left: 42px; padding-top: 17px;">

          <span class="assertive" style="margin: 0px;color: #B90143; width: 100%;">TOMORROW</span>
        </div>
    </div>
  </div>
        <ion-list>
            <ion-item class="item-icon-right clsOrders" ng-repeat="mydelivery in MyDeliveries | filter:search | limitTo:listlength" ng-click="ShowDetails('{{mydelivery.orderID}}')">
                <div class="row">
                    <div class="col col-20 clsOrderDateMonth">
                        <span class="clsOrderDate">{{mydelivery.dateAdded}}</span>
                        <div class="spacer" style="height: 5px;"></div>
                        <span class="assertive clsOrderMonth textgreycolor">{{mydelivery.monthAdded}}</span>
                    </div>
                    <div class="col col-50" style="padding-top: 12px;">
                        <span class="balanced clsOrderDetailNumber font-color clsdes texted item-text-wrap">{{mydelivery.customerName}}</span>
                        <div class="spacer" style="height: 10px;"></div>
                        <div class="clsStatusCount row cls0Padding">
                            <div class="col col-50 cls0Padding">
                                Item:&nbsp;<span class="assertive font-color">{{mydelivery.productCount}}</span>
                            </div>
                            <div class="col col-40 cls0Padding">
                                <span class="balanced clsMakeContentRight font-color">{{mydelivery.orderStatus}}</span>
                            </div>
                            <div class="col col-20 cls0Padding">
                            </div>
                        </div>
                    </div>
                    <div class="col col-25" style="padding-top: 10px;">
                        <span class="assertive clsOrderPrice textredcolor"> {{mydelivery.deliveredBy}}</span>
                        <div class="spacer" style="height: 5px;"></div>
                        <div class="col col-40 cls0Padding clsOrderTime">
                                Time:&nbsp;<span class="assertive clsOrderTime textgreycolor" >{{mydelivery.timeAdded}}</span>
                        </div>
                    </div>
                </div>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>

0 个答案:

没有答案