Question

我遇到了禁用'add'（'+'）和'substract'（' - '）按钮的问题。它应该像：

数量== 1 - ＆gt; ' - '按钮已停用

数量＆gt; 1＆amp;＆amp;数量＆lt; 15 - ＆gt;按钮' - '和'+'已启用

数量＆gt; = 15 - ＆gt; '+'已停用

如果您有任何提示可以帮助我，请分享。

这是我的整个应用程序的jsfiddle：https://jsfiddle.net/scgsc7or/23/

我尝试使用jQuery addClass和removeClass但不幸的是，当我将其添加到我的$scope.addQuantity函数中时，它会影响所有按钮，而不仅仅涉及这个按钮。

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

Answer 1

您必须将更改应用于ng-repeat的当前范围。 Jquery在这里不是明智的选择。使用ng-class

For - button

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

对于+按钮

   ng-class = "{disable:product.quantity>14}"

的CSS

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

Answer 2

使用ng-disabled

将表达式放入ng-disabled。

 var app = angular.module('app', []);

 app.controller('MainController', ['$scope', '$http', '$log',
   function($scope, $http, $log) {

     $scope.drinks = [];

     $scope.itemsToBuy = [];

     $scope.updateTotalPrice = function() {
       $scope.totalPrice = 0;

       if (itemsToBuy.length > 0) {
         for (var i = 0; i < $scope.itemsToBuy.length; i++) {
           $scope.totalPrice += $scope.itemsToBuy[i].price;
         }
       }
     }


     $scope.drinks = [{
       "name": "Pepsi 0.5l",
       "price": 1.49
     }, {
       "name": "Pepsi 1l",
       "price": 2.49
     }, {
       "name": "Pepsi 2l",
       "price": 3.49
     }, {
       "name": "Orange juice 0.5l",
       "price": 1.40
     }, {
       "name": "Lemon tea 1l",
       "price": 1.99
     }, {
       "name": "Cola-Cola 0.33l",
       "price": 0.89
     }, {
       "name": "Cola-Cola 0.5l",
       "price": 1.99
     }, {
       "name": "Cola-Cola 1l",
       "price": 2.99
     }, {
       "name": "Heineken 0.5l",
       "price": 1.89
     }, {
       "name": "Soda 0.5l",
       "price": 0.49
     }, {
       "name": "Tomato juice 0.5l",
       "price": 0.99
     }, {
       "name": "Grapefruit juice 0.5l",
       "price": 0.99
     }, {
       "name": "Aloe Vera drink 0.5l",
       "price": 2.99
     }, {
       "name": "Water 0.5l",
       "price": 0.29
     }];


     $scope.addToShoppingList = function(id) {
       var itemToAdd = $scope.drinks[id];
       itemToAdd.quantity = 1;
       $scope.itemsToBuy.push(itemToAdd);
       $scope.drinks.splice(id, 1);
       //localStorage.setItem("data", JSON.stringify($scope.itemsToBuy));
     };

     $scope.removeFromCart = function(id) {
       $scope.drinks.push($scope.itemsToBuy[id]);
       $scope.itemsToBuy.splice(id, 1);
     };


     $scope.itemsToBuy = [];
     //JSON.parse(localStorage.getItem("data"))

     $scope.getTotal = function() {
       var total = 0;

       if ($scope.itemsToBuy.length > 0) {
         for (var i = 0; i < $scope.itemsToBuy.length; i++) {
           var product = $scope.itemsToBuy[i];
           total += (product.price * product.quantity);
         }
       }
       return total.toFixed(2) + '$';
     };

     $scope.$watch('itemsToBuy', function() {
       $scope.totalPrice = $scope.getTotal();
     }, true);


     $scope.checkLength = function() {
       return $scope.itemsToBuy.length;
     };

     $scope.clearCart = function() {
       for (var i = 0; i < $scope.itemsToBuy.length; i++) {
         $scope.drinks.push($scope.itemsToBuy[i]);
       }
       $scope.itemsToBuy = [];
     };

     $scope.confirmOrder = function() {
       window.alert("Your order is accepted.");
     }


     $scope.addQuantity = function(id) {
       if ($scope.itemsToBuy[id].quantity < 15) {
         $scope.itemsToBuy[id].quantity++;
         angular.element('.substractBtn').prop('disabled', false);
       }
     }


     $scope.removeQuantity = function(id) {
       if ($scope.itemsToBuy[id].quantity > 0) {
         $scope.itemsToBuy[id].quantity--;
       }
     }


   }
 ]);

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  border: solid 1px black;
  height: 600px;
  width: 1000px;
  border-radius: 5px;
}
.shopList {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  min-height: 400px;
}
.itemList {
  padding: 10px;
  overflow-y: hidden;
  max-height: 600px;
}
.itemList li:hover {
  cursor: pointer;
  background-color: #ccc;
}
.hidden {
  display: none;
}
.rightPane {} .makeOrderBtn {
  margin-top: 10px;
  width: 100%;
}
.totalPriceInput {
  max-width: 45%;
}
.clearBtn {
  width: 45%;
}
[readonly] {
  background-color: white !important;
}
input:focus {
  outline: none;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
}
.shopList li button {
  width: 22px
}
.shopList li .btn-danger {
  margin-left: 10px;
}
.totalQuantity {
  max-width: 40px;
  margin: 0 5px;
  padding: 0;
  height: 21.5px;
  text-align: center;
  padding-right: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app='app' class="container">

  <div class="content" ng-controller="MainController">


    <div class="col-xs-6">
      <ul class="list-group itemList">
        <li class="list-group-item" ng-hide="product.isHidden" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
          <strong>{{ product.name }}</strong> - {{ product.price | currency }}
        </li>
      </ul>
    </div>

    <div class="col-xs-6 rightPane">
      <div class="col-xs-12">
        <ul class="list-group shopList">
          <li class="list-group-item" ng-repeat="(id, product) in itemsToBuy">
            <strong>{{ product.name }}</strong> - {{ product.price | currency }}
            <button ng-click="removeFromCart(id)" class="btn btn-xs btn-danger pull-right">X</button>
            <button ng-click="addQuantity(id)" ng-disabled=" product.quantity>=15" class="btn btn-xs btn-info pull-right addBtn">
              +
            </button>

            <input readonly type="text" value="{{ product.quantity }}" class="form-control totalQuantity pull-right"></input>

            <button ng-click="removeQuantity(id)" ng-disabled="product.quantity==1" class="btn btn-xs btn-info pull-right substractBtn">-
            </button>
          </li>
        </ul>
      </div>

      <button class="btn btn-danger clearBtn" ng-disabled="!checkLength()" ng-click="clearCart()">Clear the cart
      </button>
      <input readonly ng-show="!checkLength()" type="text" placeholder="Total price" class="form-control totalPriceInput pull-right"></input>
      <input readonly ng-show="checkLength()" type="text" value="{{ totalPrice }}" class="form-control totalPriceInput pull-right"></input>
      <button class="btn btn-success makeOrderBtn" ng-disabled="!checkLength()" ng-click="confirmOrder(); clearCart()">Submit your order
      </button>


    </div>


  </div>

</div>

看看这个小提琴https://jsfiddle.net/scgsc7or/24/

AngularJS购物车应用：数量＆lt;时禁用按钮2

2 个答案: