Question

所以在控制器中我有一个对象数组。然后在HTML中我有这个：

<div><input type="checkbox" ng-change="MyCtrl.checkboxesToggleAll()" />Check all</div>
<div ng-repeat="data in MyCtrl.objects track by $index">
<div>{{data.name}}</div>
<div><input type="checkbox" />Check this</div>
</div>

现在，当单击“全部检查”复选框时，将检查所有其他复选框。

然而，有一个问题。在其他地方，在另一个控制器中，根据所选参数过滤重复中的“对象”。发生的事情是，只有“重复”中与参数匹配的元素才会显示在GUI中。

真正的问题是当我点击“全部检查”时。因为即使那些未在GUI中显示的复选框/元素（由于过滤器）也被选中。我可以看到它（当然不在GUI中），因为包含所有复选框的变量也包含在GUI中实际过滤的变量。

我希望描述很清楚。我应该采用什么策略？我正在考虑使用jquery来验证（当“单击全部检查”时）哪个单独的复选框实际显示在GUI中。并且只“检查”那些。

Answer 1

如果我理解你的要求，这就是你想要的。您有多个控制器显示已过滤的元素列表。您希望能够选择/取消选择这些元素，并在其他控制器/服务中显示该选择。您需要能够选择/取消全选。

我会构建一个负责这些对象的服务。你实际上并没有说出这些对象是什么，所以我会称之为命令。

export interface SelectableOrder {
  isSelected: boolean;
  order: Order;
}

@Injectable()
export class OrderService {

  private allOrders = new BehaviorSubject<SelectableOrder[]>([]);
  private filters = new BehaviorSubject<Filter[]>([]);

  constructor(private orderAccess: OrderAccess) {
    this.loadOrdersFromServer();
  }

  private loadOrdersFromServer() {
    this.orderAccess.getAllOrders().subscribe(orders => {
      this.allOrders.next(orders.map(order => ({
        isSelected: false,
        order: order
      }));
    });
  }

  private get visibleSelectableOrders() {
    return this.allOrders.combineLatest(this.filters, inputs => {
      const [allOrders, filters] = inputs;
      return allOrders.filter(selectableOrder => !this.isFiltered(selectableOrder.order, filters));
    });
  }

  get visibleOrders() {
    return this.visibleSelectableOrders.map(selectableOrder => selectableOrder.order);
  }

  private isFiltered(order: Order, filters: Filter[]) {
    //Implementation left to the user
    return false;
  }

  selectAllVisible() {
    this.visibleSelectableOrders.forEach(order => {
      order.selected = true;
    });
    this.allOrders.next(this.allOrders.value);
  }

  deselectAllVisible() {
    this.visibleSelectableOrders.forEach(order => {
      order.selected = false;
    });
    this.allOrders.next(this.allOrders.value);
  }

}

检测另一个控制器是否过滤了重复元素

1 个答案: