How to get ng-disabled to check for an item value inside in a ng-repeat (using AngularJS)

Question

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>&nbsp;</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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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.

Solution 1

Please 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.

Solution 2

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.