答案

Question

当我的产品在购物车中时，我想将css类应用于按钮。我尝试了一些像

这样的东西

<li class="add-to-cart">
  <button class="btn btn-add-cart" ng-click="cartCtrl.updateCart(product)" 
    ng-class="{active: cartCtrl.cart[product.id]}">
    <i class="shopping-cart" aria-hidden="true"></i>
  </button>
</li>

和

updateCart

来自我的控制器的function _updateCart(product) { if (ctrl.cart[product.id] == product.quantity) { // If a product with same quantity is getting added, remove it from cart delete ctrl.cart[product.id]; } else { // add/update into cart ctrl.cart[product.id] = product.quantity; } }功能片段：

ctrl.cart

因此cartCtrl.cart[product.id]将产品ID作为键，将相应的数量作为值。如果产品ID在购物车中，active会提供数量。如果数量大于0，则应该应用expression类。

但它不起作用。它应该有效，因为最终我的ng-class="{active: 0}"应该评估为真值或假值。与ng-class="{active: 2}"，paste

一样

为什么它不起作用？

Answer 1

function _updateCart(product) {
    if (ctrl.cart[product.id] == product.quantity) {
      // If a product with same quantity is getting added, remove it from cart
      var index = ctrl.cart.indexOf(product.id);
      ctrl.cart.splice(index, 1);
    } else {
      // add/update into cart
      ctrl.cart[product.product_sku] = product.quantity;
    }
  }

从上面的代码中，我发现了一个问题。插入到数组时，您使用product.product_sku作为索引。但是您正在使用产品ID进行检索。请在两者中使用相同的内容。

答案

我不知道购物车对象中的值是什么。如果你这样做，很容易识别。

尝试以下

ng-class="cartCtrl.cart[product.id]!=null?'active':''"

-

<li class="add-to-cart">
  <button class="btn btn-add-cart" ng-click="cartCtrl.updateCart(product)" 
    ng-class="cartCtrl.cart[product.id]!=null?'active':''">
    <i class="shopping-cart"></i>
  </button>
</li>

键入对象时的ng-class

1 个答案:

答案