键入对象时的 ng-class

Question

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

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

和

<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 将产品 ID 作为键，将对应的数量作为值。如果产品 ID 在购物车中，cartCtrl.cart[product.id] 会给出数量。如果数量大于0，则应应用active类。

但它不起作用。它应该可以工作，因为最终我的expression 应该评估为真值或假值。喜欢ng-class="{active: 0}"、ng-class="{active: 2}"

为什么它不起作用？

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>