Question

很抱歉没有具体，但我正在停电，我很绝望。现在已经挣扎了2天才找到做以下事情的逻辑：每个项目都有一个＆＃39; inCart＆＃39;值。如果它是0，那么它不在那里，如果它低于7，则它在6＆＃39;插槽中的一个＆＃39;取决于价值。

现在我有按钮将每个项目分配给inCart中的值。但如果其中一个项目的值为4，那么我显然不希望所有项目都显示一个按钮，将其分配给4。

<tr ng-repeat="x in myItems">
<a ng-repeat="slot in [1,2,3,4,5,6]" ng-click="addToCart(x._id, slot)"
   class="btn btn-primary {{x.inCart != '0' ? 'disabled' : ''}}">
    {{slot}}
</a></tr>

从逻辑上思考我知道我的错误：我只看当前项目是否在购物车中，如果是，则禁用按钮。如何查看购物车中的所有商品，如果其中一个是例如4，那么为inCart分配值4的所有按钮都将被禁用，这样我就不会有多个商品同一地点在卡特。

根据我可以解决这个问题的方法，我很确定我可以让一切工作比现在更好，只是因为我甚至无法解决这个问题所以更不用说更详细了的问题。

Answer 1

您可以使用ngClass指令

您可以使用ng-class评估expression，如果true可以申请某个班级。如果没有，则不会应用该类。

<button ng-class="{'disabled': expression}">

Answer 2

如果您使用实际按钮，则可以使用ngDisabled：

<input type="button" ng-repeat="slot in [1,2,3,4,5,6]" 
       ng-click="addToCart(x._id, slot)"
       class="btn btn-primary"
       ng-disabled="x.inCart !== '0'" value="{{slot}}" />

Answer 3

您可以调用函数来检查插槽是否可用。

<强>控制器

// return the slots already used
var slotsUsed = $scope.myItems.map(function (i) {return i.inCart;}).filter( function(s) { return s > 0;});

$scope.slotAvailable = function(s) { 
    return slotsUsed.indexOf(s) == -1;
}

查看

<tr ng-repeat="x in myItems"> <td> <a ng-repeat="slot in [1,2,3,4,5,6]" class="btn btn-primary" ng-click="addToCart(x._id, slot)" ng-class="{'disabled': x.inCart != '0' || !slotAvailable(slot)}"> {{slot}} </a> </td> </tr>

Answer 4

有专门为此设计的指令：ngDisabled

https://docs.angularjs.org/api/ng/directive/ngDisabled

angular：如何根据条件禁用按钮

4 个答案: