Question

我正在编写一个关于Angular JS的教程，我们在其中构建了一个购物车应用程序。

通过单击按钮将项目添加到购物车。这很好。然而，一旦我去查看购物车和结账，我想在数量上有一个“旋转器”，这样我就可以增加/减少数量。

我无法使用IE 11，虽然它可能支持HTML 5输入类型“数字”，但它不会将控件扩充为微调器（As seen in this SO question）

因此我试图在我的局部视图中添加一个jQuery UI微调器。

这是我的主要观点

<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
    <title>SportsStore</title>

    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>

    <script src="../Scripts/jquery-1.6.4.js"></script>
    <script src="../Scripts/jquery-ui-1.11.4.js"></script>

    <link href="/Content/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link href="Content/Styles/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="Content/Styles/bootstrap/bootstrap-theme.css" rel="stylesheet" />

    <link href="css/site.css" rel="stylesheet" />

    <script src="js/ngSportStore.js"></script>
    <script src="routes/sportsStoreRoutes.js"></script>
    <script src="controllers/sportsStore.js"></script>
    <script src="filters/customFilters.js"></script>
    <script src="controllers/productListControllers.js"></script>
    <script src="components/cart/cart.js"></script>
    <script src="controllers/statesController.js"></script>
    <script src="controllers/checkoutController.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
    <div class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
        <cart-summary></cart-summary>
    </div>
    <div class="alert alert-danger" ng-show="data.error">
        Error ({{data.error.status}}). The product data was not loaded.
        <a href="/app.html" class="alert-link">Click here to try again</a>
    </div>

    <ng-view></ng-view>
</body>
</html>

这是我购物车的部分视图：

<script>
    $(function () {

        $("#spinner").spinner({
            min: 0
        });
    });
</script>

<h2>Your cart:</h2>

<div ng-controller="cartSummaryController">

    <div class="alert alert-warning" ng-show="cartData.length === 0">
        There are no products in your cart.

        <a href="#/products" class="alert-link">Click here to continue shopping</a>
    </div>

    <div ng-hide="cartData.length === 0">
        <table class="table">
            <thead>
                <tr>
                    <th>Quantity</th>
                    <th>Item</th>
                    <th class="text-right">Price</th>
                    <th class="text-right">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in cartData">
                    <td class="text-center"><input id="spinner" class="pull-left" value="{{item.count}}"></td>
                    <td class="text-left">{{item.name}}</td>
                    <td class="text-right">{{item.price | currency}}</td>
                    <td class="text-right">{{(item.price * item.count) | currency}}</td>
                    <td>
                        <button ng-click="remove(item.id)" class="btn btn-sm btn-warning">Remove</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" class="text-right">Total:</td>
                    <td class="text-right">{{total() | currency}}</td>
                </tr>
            </tfoot>
        </table>
        <div class="text-center">
            <a class="btn btn-primary" href="#/products">Continue shopping</a>
            <a class="btn btn-primary" href="#/placeorder">Place Order</a>
        </div>
    </div>
</div>

在局部视图中，显示数量的文本框并使用模型中的值填充，但不显示微调器的图标。

我把这个jsFiddle放在一起，其中一切都按预期工作。但我似乎无法在我的应用程序中使用它。

我做错了什么？

谢谢

修改

我尝试了以下建议：添加Font-awesome，包含并使用最新版本的JQuery。两者都没有奏效。我已经尝试移动我将JQuery加载到局部视图的位置。当我这样做并监控IE F12网络时，我看不到从CDN下载的库。

另外，我在document.ready函数中添加了一个警告，但它没有被触发。

欢迎任何其他建议。

将数量微调器添加到购物车

0 个答案: