Question

＆＃13;

//here we crate the module for the CRUD application here    
var app= angular.module("shoppingApp", []);
    app.controller("UserController",  ['$rootScope',    '$scope','$filter','$window',
	 function($scope,$rootScope, $filter, $window) { 
	 
 	/**
	 * @Summary:addProductInCart , to get the wishList of the userSection.
	 * @param:   pname,bname
	 * @return:  count $scope.pricerange =" 0 - 5000"
	 * @Description: 
	 */
	 $scope.prouctInCartList     = [];
	 $scope.item                 = {};
	 $scope.prouctInCartList     = [];
	 $scope.totalAmountDisplay   = 0;
	 $scope.countProducts        = 0;
	 $scope.isDisabled  = false;

 	$scope.addProductInCart = function(index, item) {
 		$scope.isDisabled = true;
 		var data = {
			index :index,
			cart : item 			
 		}

    $rootScope.prouctInCartList.push(data);
    localStorage.setItem('productObject',                   JSON.stringify($rootScope.prouctInCartList));

    for(index in $scope.prouctInCartList) {
      var orderDto = $scope.prouctInCartList[index];
      var totalAmount = 0;
      if(orderDto != undefined && orderDto != null) {
          totalAmount = totalAmount + orderDto.cart.range *    orderDto.cart.quantity;
			}
		}

		$scope.totalAmountDisplay  = $scope.totalAmountDisplay + totalAmount; 
 		$scope.countProducts ++;	
 	}} 
	]);

＆＃13;

<!DOCTYPE html>
<html ng-app="shoppingApp">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app/controller.js"></script>  
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="my.css">
<link rel="stylesheet" href="cmn.css">
<div w3-include-html="myFilter.html"></div>
<div w3-include-html="shoppinCart.html"></div>
<div w3-include-html="signup.html"></div>
<body class="topShop" ng-controller="UserController">

	<div class="marginSet w3-row">
      <div id="hideSlowProduct" class="productInfo  w3-col m3  w3-card-4 w3-margin-left"  
   ng-repeat="list in filtered = (show | filter: product)filter:brandFilter 
| filter :colorFilter">
           <span ng-click="removeItem($event,list)" title="Remove product">
                <i class="fa fa-close" style="font-size:20px; float:right">                </i>
            </span>
          <div class="w3-container">
            <div calss="hover-effect">
              <div class="hover-div">
                 <img class="imageSet" src="{{list.img}}"
     onclick="document.getElementById('openProduct').style.display='block'"
                ng-click="currentImage($index)">
              </div>
            </div>
              <div id="openProduct" class="w3-modal" onclick="this.style.display='none'">
                  <div class="openModal w3-modal-content w3-animate-zoom">
                     <div class="minSet w3-container w3-twothird">
                       <img class="modelOpenImg"  src="{{imageOpen.img}}">
                    </div>
                    <div class=" w3-container w3-third"> 
                      <table class="w3-table-all w3-hoverable">
                        <thead>
                          <tr class="w3-red">
                            <th>Pname</th>
                            <th>Brand</th>
                            <th>range</th>
                            <th>color</th>  
                          </tr>
                        </thead>
                        <tr>
                          <td>{{imageOpen.pname}}</td>
                          <td>{{imageOpen.brand}}</td>
                          <td>{{imageOpen.range}}</td>
                          <td> {{imageOpen.color}}</td>
                        </tr>
                      </table>
                  </div>
                </div>
            </div>
              <div class="container">
                  <div class="fa fa-heart" ng       model="removedInWishList[$index]" 
                      ng-show="addedInWishList[$index]"
                      ng-click= "removeInWishList($index, list)">
                  </div> 
                  <div class="fa fa-heart-o" ng-model="addedInWishList[$index]"
                       ng-show="!addedInWishList[$index]" 
                       ng-click= "addInWishList($index, list)">
                   </div>
                   <a class="w3-btn w3-red" ng-model="item"
                        ng-click="item.isDisabled || addProductInCart($index, list)"
                        ng-disabled="item.isDisabled">Add To Cart
                    </a>
                     <span type="radio" class="colorCode w3-right" style="background-color:{{list.colorCode}};"></span>
                    <b>&#8377;{{list.range}}</b>
                                    </p>
              </div>
           </div>
		   </div>
		</div>
	</body>
</html>

＆＃13;

我创建了一个购物网站，其中用户点击addToCart按钮产品已添加到购物车中，我必须禁用单击的按钮，但在我的情况下，所有按钮都被禁用，如何解决此问题？

＆＃13;

 	/**
	 * @Summary:addProductInCart , to get the addProduct in cart
	 * @param:   index,item
	 * @return:  NA
	 * @Description: 
	 */
	 $scope.item                 = {};
	 $scope.prouctInCartList     = [];
	 $scope.totalAmountDisplay   = 0;
	 $scope.countProducts        = 0;
	$scope.isDisabled = false;
	
 	$scope.addProductInCart = function(index, item) {
 		$scope.isDisabled = true;
 		var data = {
			index :index,
			cart : item 			
 		}

 		$rootScope.prouctInCartList.push(data);
 		//Here we will store product array into the localStorage for use another page
 localStorage.setItem('productObject',JSON.stringify($rootScope.prouctInCartList));
    }

＆＃13;

    <a class="w3-btn w3-red" ng-model="item.cart" 
        ng-click="isDisabled || addProductInCart($index,list)"
        ng-disabled="isDisabled">Add To Cart
    </a>

＆＃13;

Answer 1

您的所有按钮都有一个变量$scope.isDisabled。因此，当您将$scope.isDisabled设置为true时，所有按钮都将具有disabled属性。我对你的代码做了一些修改。见下文

 	/**
	 * @Summary:addProductInCart , to get the addProduct in cart
	 * @param:   index,item
	 * @return:  NA
	 * @Description: 
	 */
	 $scope.item                 = {};
	 $scope.prouctInCartList     = [];
	 $scope.totalAmountDisplay   = 0;
	 $scope.countProducts        = 0;
	$scope.isDisabled = false;
	
 	$scope.addProductInCart = function(index, item) {
 		//$scope.isDisabled = true;
                item.isDisabled = true; // since you are passing your item here, you can make it disabled.
 		var data = {
			index :index,
			cart : item 			
 		}

 		$rootScope.prouctInCartList.push(data);
 		//Here we will store product array into the localStorage for use another page
 localStorage.setItem('productObject',JSON.stringify($rootScope.prouctInCartList));
    }

    <a class="w3-btn w3-red" ng-model="item.cart" 
        ng-click="item.isDisabled || addProductInCart($index,item)"
        ng-disabled="item.isDisabled">Add To Cart
    </a>

如何在AngularJS中禁用单击按钮？

1 个答案: