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>₹{{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 ?
\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>
alle Sie Tasten auf IsDisable Variable deaktiviert werden. Machen Sie es so: ng-disable = "item.IsDisabled". Add behinderte Eigenschaft für jeden Artikel –
Sir ich benutze dies, aber ich habe Fehler Artikel ist nicht definiert. –
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