Question

我有两个复选框。 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>

我该怎么做？

Answer 1

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

如果您使用<ion-checkbox> ionChange事件来执行必要的数据处理逻辑，请执行以下操作：

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

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

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

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

<强>脚本

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

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

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

1 个答案: