Как сравнить необходимые данные, установив флажок и показать в виде списка

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

Для UI: Я думаю, вам нужно связать функцию действия для события изменения флажка.

Если вы используете, <ion-checkbox> у вас есть ionChange событие, чтобы выполнить необходимую обработку данных логику, как это:

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

Отъезд documentation и this выпуск на ионном форуме.

Также проверьте, работает ли (click)="processData(parameters)". Однако это не было проверено.

В приведенном ниже списке пользовательский интерфейс должен быть достаточно простым, используя ngFor и ngIf.

Script

Теперь данные вы должны показать в списке должен быть манипулируют в этом processData(parameters) методом.

Примечание: Но, глядя на ваш прецедент, я не уверен, что вы используете правильный дизайн. Поддержание состояния отложенных/заказанных для одного устройства в порядке. Но данные будут недействительными для нескольких устройств, так как статус разных устройств для того, какие данные загружены и какие данные ожидаются, будет отличаться. Нужна дополнительная помощь здесь, чтобы понять конкретный вариант использования.