Html AngularJS购物车应用程序：数量<；时禁用按钮；2.

我在禁用“添加”（“+”）和“减法”（“-”）按钮时遇到问题。它的工作原理应该是：

• 数量==1->'-'按钮被禁用
• 数量>1和数量<15->按钮“-”和“+”已启用
• 数量>=15->“+”被禁用

如果你有任何帮助我的提示，请分享

下面是我的整个应用程序的JSFIDLE：

我试着用jQuery

addClass

和

removeClass

来实现这一点，但不幸的是，当我将它添加到我的

$scope.addQuantity

函数中时，它会影响所有按钮，而不仅仅是这个按钮

---

提前感谢您的每一个提示。

您必须对ng repeat的当前范围应用更改。Jquery在这里不是一个明智的选择。使用ng类

For-按钮

<button ng-click="addQuantity(id)"
              class="btn btn-xs btn-info pull-right addBtn" 
              ng-class="{disable:product.quantity<2}" >
                        +
                    </button>

Css

---

您必须对ng repeat的当前范围应用更改。Jquery在这里不是一个明智的选择。使用ng类

For-按钮

<button ng-click="addQuantity(id)"
              class="btn btn-xs btn-info pull-right addBtn" 
              ng-class="{disable:product.quantity<2}" >
                        +
                    </button>

Css

使用

只需将您的表达式放入字符串即可

var-app=angular.module（'app'，[]）；
app.controller（'MainController'，['$scope'，'$http'，'$log'，
函数（$scope、$http、$log）{
$scope.drinks=[]；
$scope.itemsToBuy=[]；
$scope.updateTotalPrice=函数（）{
$scope.totalPrice=0；
如果（itemsToBuy.length>0）{
对于（变量i=0；i<$scope.itemsToBuy.length；i++）{
$scope.totalPrice+=$scope.itemsToBuy[i]。价格；
}
}
}
$scope.com=[{
“名称”：“百事可乐0.5l”，
“价格”：1.49
}, {
“名称”：“百事可乐1l”，
“价格”：2.49
}, {
“名称”：“百事2l”，
“价格”：3.49
}, {
“名称”：“橙汁0.5l”，
“价格”：1.40
}, {
“名称”：“柠檬茶1l”，
“价格”：1.99
}, {
“名称”：“可乐0.33l”，
“价格”：0.89
}, {
“名称”：“可乐0.5l”，
“价格”：1.99
}, {
“名称”：“可乐1l”，
“价格”：2.99
}, {
“名称”：“喜力0.5l”，
“价格”：1.89
}, {
“名称”：“苏打0.5l”，
“价格”：0.49
}, {
“名称”：“番茄汁0.5l”，
“价格”：0.99
}, {
“名称”：“葡萄柚汁0.5l”，
“价格”：0.99
}, {
“名称”：“芦荟饮料0.5l”，
“价格”：2.99
}, {
“名称”：“水0.5l”，
“价格”：0.29
}];
$scope.addToShoppingList=函数（id）{
var itemToAdd=$scope.drinks[id]；
itemToAdd.quantity=1；
$scope.itemsToBuy.push（itemToAdd）；
$scope.饮料.拼接（id，1）；
//setItem（“数据”，JSON.stringify（$scope.itemsToBuy））；
};
$scope.removeFromCart=函数（id）{
$scope.drinks.push（$scope.itemsToBuy[id]）；
$scope.itemsToBuy.splice（id，1）；
};
$scope.itemsToBuy=[]；
//parse（localStorage.getItem（“数据”））
$scope.getTotal=function（）{
var合计=0；
如果（$scope.itemsToBuy.length>0）{
对于（变量i=0；i<$scope.itemsToBuy.length；i++）{
var product=$scope.itemsToBuy[i]；
合计+=（产品.价格*产品.数量）；
}
}
返回总计.toFixed（2）+“$”；
};
$scope.$watch（'itemsToBuy'，function（）{
$scope.totalPrice=$scope.getTotal（）；
}，对）；
$scope.checkLength=函数（）{
返回$scope.itemsToBuy.length；
};
$scope.clearCart=function（）{
对于（变量i=0；i<$scope.itemsToBuy.length；i++）{
$scope.drinks.push（$scope.itemsToBuy[i]）；
}
$scope.itemsToBuy=[]；
};
$scope.confirmOrder=函数（）{
window.alert（“您的订单已接受”）；
}
$scope.addQuantity=函数（id）{
如果（$scope.itemsToBuy[id]。数量<15）{
$scope.itemsToBuy[id].quantity++；
角度.element（'.substractBtn'）.prop（'disabled'，false）；
}
}
$scope.removeQuantity=函数（id）{
如果（$scope.itemsToBuy[id]。数量>0）{
$scope.itemsToBuy[id]。数量--；
}
}
}
]);
.container{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.内容{
边框：实心1px黑色；
高度：600px；
宽度：1000px；
边界半径：5px；
}
.购物清单{
最大高度：400px；
溢出y：自动；
填充：10px；
最小高度：400px；
}
.项目清单{
填充：10px；
溢出y：隐藏；
最大高度：600px；
}
.itemList li:悬停{
光标：指针；
背景色：#ccc；
}
.隐藏{
显示：无；
}
.rightPane{}.makeOrderBtn{
边缘顶部：10px；
宽度：100%；
}
.totalPriceInput{
最大宽度：45%；
}
.clearBtn{
宽度：45%；
}
[只读]{
背景色：白色！重要；
}
输入：焦点{
大纲：无；
}
.文本{
位置：绝对位置；
排名：0；
左：0；
}
.购物清单li按钮{
宽度：22px
}
.购物清单李.btn危险{
左边距：10px；
}
.总数量{
最大宽度：40px；
利润率：0.5px；
填充：0；
身高：21.5px；
文本对齐：居中；
右侧填充：3px；
}



{{product.name}-{{{product.price | currency}




{{product.name}-{{{product.price | currency}
X
+
-


清车
提交您的订单
使用

只需将您的表达式放入字符串即可


   .disable{
        opacity:0.2;
        pointer-events:none;
    }