如何通过选中复选框来比较所需数据并在列表视图中显示答案

【问题标题】：How to compare the needed data by selecting check box and to show in list view如何通过选中复选框来比较所需数据并在列表视图中显示
【发布时间】：2017-06-21 13:43:23
【问题描述】：

我有两个复选框。 1. filter by data, 2. Show pending.。下面我在列表视图中从数据库中填充一些数据。我需要的是，如果我按下filter by data 复选框，那么我的列表视图应该重新加载并显示数据格式的数据。表示首先添加到数据库中的数据应该首先显示在列表视图中。

在我的数据库中，我有一个名为status 的参数，它将显示状态pending or ordered。因此，如果我按下show pending 复选框，那么具有待处理状态的记录应该填充到我的列表视图中。这是我的代码：

<div class="row" >

    <div class="col col-50" style="border-right: 1px #ccc solid;">
        <input type="checkbox" style="margin: 8px;"> <span class="assertive" style="margin: 0px;">Show pending</span>
    </div>

    <div class="col col-50">
        <input type="checkbox" style="margin: 8px;"> <span class="assertive" style="margin: 0px;">sort by date</span>
    </div>

       </div>
<ion-list>
            <ion-item class="item-icon-right clsOrders" ng-repeat="mydash in MyOrders" ng-click="ShowDetails(mydash)">
                <div class="row" >
                    <div class="col col-20 clsOrderDateMonth">
                        <span class="clsOrderDate">{{mydash.dateAdded}}</span>
                        <div class="spacer" style="height: 5px;"></div>
                        <span class="assertive clsOrderMonth">{{mydash.monthAdded}}</span>
                    </div>
                    <div class="col col-50">
                        <span class="balanced clsOrderDetailNumber">{{mydash.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">{{mydash.productCount}}</span>
                            </div>
                            <div class="col col-40 cls0Padding">
                                <span class="balanced clsMakeContentRight">{{mydash.orderStatus}}</span>
                            </div>
                            <div class="col col-20 cls0Padding">
                            </div>
                        </div>
                    </div>
                    <div class="col col-25 ">
                        <div class="spacer" style="height: 5px;"></div>
                        <div class="col col-40 cls0Padding" style="margin-top: 26px;font-size: 11px;">
                                Amount:&nbsp;<span class="assertive">{{mydash.orderTotalAmount}}</span>
                        </div>
                    </div>
                </div>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
            </ion-list>

我该怎么做？

【问题讨论】：

标签： javascript html checkbox ionic-framework ionic2

【解决方案1】：

对于用户界面： 我认为您必须为复选框更改事件关联一个操作函数。

如果你使用<ion-checkbox>你有ionChange事件来执行必要的数据处理逻辑，像这样：

<ion-checkbox (ionChange)="processData(parameters)"> </ion-checkbox>

查看 ionic 论坛上的 documentation 和 this 问题。

另外，检查(click)="processData(parameters)" 是否有效。虽然没有测试过。

在下面的列表中，使用 ngFor 和 ngIf 的 UI 应该足够简单。

脚本

现在，您应该在列表中显示的数据必须在此 processData(parameters) 方法中进行操作。

注意：但是，看看您的用例，我不确定您使用的设计是否正确。维护一台设备的挂起/订购状态很好。但是对于多个设备，数据将变得无效，因为不同设备的已加载数据和待处理数据的状态会有所不同。在这里需要更多帮助来理解确切的用例。

【讨论】：