2017-07-09 4 views
1

Wie deaktiviere ich eine angeklickte Schaltfläche in AngularJS?

//here we crate the module for the CRUD application here  
 
var app= angular.module("shoppingApp", []); 
 
    app.controller("UserController", ['$rootScope', '$scope','$filter','$window', 
 
\t function($scope,$rootScope, $filter, $window) { 
 
\t 
 
    \t /** 
 
\t * @Summary:addProductInCart , to get the wishList of the userSection. 
 
\t * @param: pname,bname 
 
\t * @return: count $scope.pricerange =" 0 - 5000" 
 
\t * @Description: 
 
\t */ 
 
\t $scope.prouctInCartList  = []; 
 
\t $scope.item     = {}; 
 
\t $scope.prouctInCartList  = []; 
 
\t $scope.totalAmountDisplay = 0; 
 
\t $scope.countProducts  = 0; 
 
\t $scope.isDisabled = false; 
 

 
    \t $scope.addProductInCart = function(index, item) { 
 
    \t \t $scope.isDisabled = true; 
 
    \t \t var data = { 
 
\t \t \t index :index, 
 
\t \t \t cart : item \t \t \t 
 
    \t \t } 
 

 
    $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; 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t $scope.totalAmountDisplay = $scope.totalAmountDisplay + totalAmount; 
 
    \t \t $scope.countProducts ++; \t 
 
    \t }} 
 
\t ]);
<!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="[email protected]*" 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"> 
 

 
\t <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> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html> 
 
\t \t

Ich erstelle eine Shopping-Website, in der Benutzer klicken Sie auf das Produkt addToCart Taste ist in den Warenkorb legen und ich muss deaktiviert eine klickten Taste aber in meinem Fall alle Tasten deaktiviert, wie man behebe dieses Problem enter image description here?

\t /** 
 
\t * @Summary:addProductInCart , to get the addProduct in cart 
 
\t * @param: index,item 
 
\t * @return: NA 
 
\t * @Description: 
 
\t */ 
 
\t $scope.item     = {}; 
 
\t $scope.prouctInCartList  = []; 
 
\t $scope.totalAmountDisplay = 0; 
 
\t $scope.countProducts  = 0; 
 
\t $scope.isDisabled = false; 
 
\t 
 
    \t $scope.addProductInCart = function(index, item) { 
 
    \t \t $scope.isDisabled = true; 
 
    \t \t var data = { 
 
\t \t \t index :index, 
 
\t \t \t cart : item \t \t \t 
 
    \t \t } 
 

 
    \t \t $rootScope.prouctInCartList.push(data); 
 
    \t \t //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="isDisabled || addProductInCart($index,list)" 
 
     ng-disabled="isDisabled">Add To Cart 
 
    </a>

+0

alle Sie Tasten auf IsDisable Variable deaktiviert werden. Machen Sie es so: ng-disable = "item.IsDisabled". Add behinderte Eigenschaft für jeden Artikel –

+0

Sir ich benutze dies, aber ich habe Fehler Artikel ist nicht definiert. –

+0

Weil Sie es in Ihrem Controller definieren müssen :) Schreiben Sie einfach $ scope.items = {}, es wird Sie Dictionnary deaktiviert werden. Nichts muss initialisiert werden, da in JS undefined als falsch betrachtet wird. Wenn Sie einen Wert deaktivieren möchten, machen Sie einfach $ scope.items.item1 = true; – Alburkerk

Antwort

0

Sie haben eine Variable, $scope.isDisabled für alle Ihre Tasten. Wenn Sie also $scope.isDisabled auf true setzen, haben alle Ihre Schaltflächen das Attribut disabled. Ich habe einige Änderungen an Ihrem Code vorgenommen. Sehen Sie es unter

\t /** 
 
\t * @Summary:addProductInCart , to get the addProduct in cart 
 
\t * @param: index,item 
 
\t * @return: NA 
 
\t * @Description: 
 
\t */ 
 
\t $scope.item     = {}; 
 
\t $scope.prouctInCartList  = []; 
 
\t $scope.totalAmountDisplay = 0; 
 
\t $scope.countProducts  = 0; 
 
\t $scope.isDisabled = false; 
 
\t 
 
    \t $scope.addProductInCart = function(index, item) { 
 
    \t \t //$scope.isDisabled = true; 
 
       item.isDisabled = true; // since you are passing your item here, you can make it disabled. 
 
    \t \t var data = { 
 
\t \t \t index :index, 
 
\t \t \t cart : item \t \t \t 
 
    \t \t } 
 

 
    \t \t $rootScope.prouctInCartList.push(data); 
 
    \t \t //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>

+0

Hallo mein Herr, ich habe den Artikel hier übergeben - item.isDisabled [item] = true; hier wird Artikel gefunden, aber über falscher Zustand Artikel wird nicht gefunden ich habe undefiniert? –

+0

Tun Sie nicht 'item.isDisabled [item] = true' nur' item.isDisabled = true' –

+0

sir habe ich bereits verwenden, aber klicken Sie auf eine Schaltfläche antaher Schaltfläche ist deaktiviert? –

Verwandte Themen