javascript - 如何让 ng-disabled 检查 ng-repeat 中的项目值(使用 AngularJS)

Question

当在 AngularJS ng-repeat 指令中时，我无法让 ng-disabled 工作。请看下面的代码。有人可以让我知道我哪里出错了吗？感谢您的帮助!

注意:这只是一个小型演示应用程序，所以请原谅硬编码数据等，我只是想学习 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>

我也试过用

data-ng-disabled="{toy.stocklevel < 1}"

也作为禁用行，而不是使用 hasStock 函数。这似乎也不起作用。

Answer 1

请尝试不带括号:

data-ng-disabled="toy.stocklevel < 1"

---

或者稍微修改一下hasStock(看if表达式):

$scope.hasStock = function(index) {
    var toy = $scope.toys[index];
    if (toy.stocklevel < 1) {
        return true;
    }
    return false;
}

并保持 ng-disabled 不变:

data-ng-disabled="hasStock($index)"

有工作JSFiddle .