I am having trouble getting ng-disabled working when inside a AngularJS ng-repeat directive. Please see code below. Can someone let me know where I am going wrong? Thanks for your help!
Note: This is just a small demo app, so please excuse hardcoded data etc, I am just trying to learn AngularJS.
<div id="container" data-ng-app>
<h1>Angular Toystore</h1>
<p>Please browse the toystore catalog.</p>
<div data-ng-controller="cartCtrl">
<table>
<thead><tr><td>Name</td><td>Price</td><td>Type</td><td>Stock Level</td><td> </td></tr></thead>
<tbody>
<tr data-ng-repeat="toy in toys">
<td>{{toy.name}}</td>
<td>${{toy.price}}.00</td>
<td>{{toy.type}}</td>
<td>{{toy.stocklevel}}</td>
<td><input type="button" value="Buy" data-ng-disabled="hasStock($index)" data-ng-click="addCartItem(toy)" /></td>
</tr>
</tbody>
</table>
<br /><br />
<table>
<thead><tr><td>Name</td><td>Price</td><td>Quantity</td><td>Subtotal</td></tr></thead>
<tbody>
<tr data-ng-repeat="cartitem in cartitems">
<td>{{cartitem.name}}</td>
<td>${{cartitem.price}}.00</td>
<td>{{cartitem.quantity}}</td>
<td>${{cartitem.subtotal}}.00</td>
<td><input type="button" value="Remove" data-ng-click="deleteItem($index)" /></td>
</tr>
<tr>
<td><b>Total:</b></td><td><b>${{carttotal}}.00</b></td><td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
function cartCtrl($scope) {
$scope.carttotal = 0;
$scope.cartitems = [];
$scope.toys = [
{ id: 1, name: "Operation", price: 20, type: "Board Games", stocklevel: 30 },
{ id: 2, name: "Big Ted", price: 12, type: "Stuffed Toys", stocklevel: 10 },
{ id: 3, name: "Ted E Bear", price: 15, type: "Stuffed Toys", stocklevel: 15 },
{ id: 4, name: "Lego Tie Fighter", price: 49, type: "Blocks", stocklevel: 5 },
{ id: 5, name: "Bouncy Bouncy Ball", price: 7, type: "Ball Games", stocklevel: 300 },
{ id: 6, name: "Monopoly", price: 23, type: "Board Games", stocklevel: 40 }
];
$scope.addCartItem = function (toy) {
//if item is not in the cart, add it, otherwise just increment the quantity
var itemsFound = $.grep($scope.cartitems, function (e) { return e.id == toy.id; });
if (itemsFound.length > 0) {
//add the item to the cart
existingItem = itemsFound[0];
existingItem.quantity = existingItem.quantity + 1;
} else {
//add the item to the cart
var cartitem = { id: toy.id, name: toy.name, price: toy.price, quantity: 1, subtotal: toy.price };
console.log("cart item : " + cartitem.name + " - " + cartitem.id);
$scope.cartitems.push(cartitem);
}
//adjust the stocklevel down by 1
toy.stocklevel = toy.stocklevel - 1;
//total = total + (qty * price) but quantity is always 1 so just add the price to the total
$scope.carttotal = $scope.carttotal + toy.price;
console.log("addItem event finished");
}
$scope.deleteCartItem = function (index) {
var item = $scope.cartitems[index];
//find the toy by id
var toy = null;
var toysFound = $.grep($scope.toys, function (e) { return e.id == item.id; });
if (toysFound.length > 0) {
toy = toysFound[0];
}
//return the quantity to stock
toy.stocklevel = toy.stocklevel + item.quantity;
//remove the item from the cart
$scope.cartitems.splice(index, 1);
}
$scope.hasStock = function(index) {
var toy = $scope.toys[index];
if (toy.stocklevel > 0) {
return true;
}
return false;
}
}
</script>
I have also tried using
data-ng-disabled="{toy.stocklevel < 1}"
as the disabled line as well, rather than using the hasStock function. This doesn't seem to work either.
I am having trouble getting ng-disabled working when inside a AngularJS ng-repeat directive. Please see code below. Can someone let me know where I am going wrong? Thanks for your help!
Note: This is just a small demo app, so please excuse hardcoded data etc, I am just trying to learn AngularJS.
<div id="container" data-ng-app>
<h1>Angular Toystore</h1>
<p>Please browse the toystore catalog.</p>
<div data-ng-controller="cartCtrl">
<table>
<thead><tr><td>Name</td><td>Price</td><td>Type</td><td>Stock Level</td><td> </td></tr></thead>
<tbody>
<tr data-ng-repeat="toy in toys">
<td>{{toy.name}}</td>
<td>${{toy.price}}.00</td>
<td>{{toy.type}}</td>
<td>{{toy.stocklevel}}</td>
<td><input type="button" value="Buy" data-ng-disabled="hasStock($index)" data-ng-click="addCartItem(toy)" /></td>
</tr>
</tbody>
</table>
<br /><br />
<table>
<thead><tr><td>Name</td><td>Price</td><td>Quantity</td><td>Subtotal</td></tr></thead>
<tbody>
<tr data-ng-repeat="cartitem in cartitems">
<td>{{cartitem.name}}</td>
<td>${{cartitem.price}}.00</td>
<td>{{cartitem.quantity}}</td>
<td>${{cartitem.subtotal}}.00</td>
<td><input type="button" value="Remove" data-ng-click="deleteItem($index)" /></td>
</tr>
<tr>
<td><b>Total:</b></td><td><b>${{carttotal}}.00</b></td><td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
function cartCtrl($scope) {
$scope.carttotal = 0;
$scope.cartitems = [];
$scope.toys = [
{ id: 1, name: "Operation", price: 20, type: "Board Games", stocklevel: 30 },
{ id: 2, name: "Big Ted", price: 12, type: "Stuffed Toys", stocklevel: 10 },
{ id: 3, name: "Ted E Bear", price: 15, type: "Stuffed Toys", stocklevel: 15 },
{ id: 4, name: "Lego Tie Fighter", price: 49, type: "Blocks", stocklevel: 5 },
{ id: 5, name: "Bouncy Bouncy Ball", price: 7, type: "Ball Games", stocklevel: 300 },
{ id: 6, name: "Monopoly", price: 23, type: "Board Games", stocklevel: 40 }
];
$scope.addCartItem = function (toy) {
//if item is not in the cart, add it, otherwise just increment the quantity
var itemsFound = $.grep($scope.cartitems, function (e) { return e.id == toy.id; });
if (itemsFound.length > 0) {
//add the item to the cart
existingItem = itemsFound[0];
existingItem.quantity = existingItem.quantity + 1;
} else {
//add the item to the cart
var cartitem = { id: toy.id, name: toy.name, price: toy.price, quantity: 1, subtotal: toy.price };
console.log("cart item : " + cartitem.name + " - " + cartitem.id);
$scope.cartitems.push(cartitem);
}
//adjust the stocklevel down by 1
toy.stocklevel = toy.stocklevel - 1;
//total = total + (qty * price) but quantity is always 1 so just add the price to the total
$scope.carttotal = $scope.carttotal + toy.price;
console.log("addItem event finished");
}
$scope.deleteCartItem = function (index) {
var item = $scope.cartitems[index];
//find the toy by id
var toy = null;
var toysFound = $.grep($scope.toys, function (e) { return e.id == item.id; });
if (toysFound.length > 0) {
toy = toysFound[0];
}
//return the quantity to stock
toy.stocklevel = toy.stocklevel + item.quantity;
//remove the item from the cart
$scope.cartitems.splice(index, 1);
}
$scope.hasStock = function(index) {
var toy = $scope.toys[index];
if (toy.stocklevel > 0) {
return true;
}
return false;
}
}
</script>
I have also tried using
data-ng-disabled="{toy.stocklevel < 1}"
as the disabled line as well, rather than using the hasStock function. This doesn't seem to work either.
2 Answers
Reset to default 5Please try without parentheses:
data-ng-disabled="toy.stocklevel < 1"
Or modify the hasStock a little bit (see the if expression):
$scope.hasStock = function(index) {
var toy = $scope.toys[index];
if (toy.stocklevel < 1) {
return true;
}
return false;
}
and leave ng-disabled unchanged:
data-ng-disabled="hasStock($index)"
There is working JSFiddle.
Your logic was reversed. You would want the button to be disabled when the stocklevel is 0, thus preventing from buying:
$scope.hasStock = function(index) {
var toy = $scope.toys[index];
if (toy.stocklevel <= 0) {
return true;
}
return false;
}
ng-disabled=true means to disable the element.