Question

我正在使用 AngularJS 建立一个在线食品订购网站。我想要做的是通过单击类别选项卡来更改过滤器。这是我的代码：

shoppingCart.prototype.changeFilter = function (cat) {
    var ref = document.getElementById("refresh");
     category = cat;
}

我的HTML看起来像这样：

<ul class="menu-filter-list list-inline margin-b-40 text-center">
            <li>
                <a ng-click="cart.changeFilter(null)" id="refresh">All</a>
            </li>
            <li data-filter=".{{product.category}}" ng-repeat="product in store.products | unique:'category'" >
                <a ng-click="cart.changeFilter(product.category)">
                    {{product.category}}
                    <span></span>
                </a>
            </li>
        </ul>

过滤器应用于ng-click="cart.changeFilter(product.category)"

更新： controller.js

'use strict';

// the storeController contains two objects:
// - store: contains the product list
// - cart: the shopping cart object
function storeController($scope, $routeParams, DataService) {

    // get store and cart from service
    $scope.store = DataService.store;
    $scope.cart = DataService.cart;

    // use routing to pick the selected product
    if ($routeParams.productSku != null) {
        $scope.product = $scope.store.getProduct($routeParams.productSku);
    }
}

app.js

'use strict';

// App Module: the name OnlineOrders matches the ng-app attribute in the main <html> tag
// the route provides parses the URL and injects the appropriate partial page
var storeApp = angular.module('OnlineOrders', ['ui']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/store', {
        templateUrl: 'partials/store.htm',
        controller: storeController,
      }).
      when('/products/:productSku', {
        templateUrl: 'partials/product.htm',
        controller: storeController
      }).
      when('/cart', {
        templateUrl: 'partials/shoppingCart.htm',
        controller: storeController
      }).
      when('/processing', {
          templateUrl: 'partials/processingOrder.htm',
          controller: storeController
      }).
      otherwise({
        redirectTo: '/store'
      });
}]);

// create a data service that provides a store and a shopping cart that
// will be shared by all views (instead of creating fresh ones for each view).
storeApp.factory("DataService", function () {

    // create store
    var myStore = new store();

    // create shopping cart
    var myCart = new shoppingCart("OnlineOrders");

    myCart.addCheckoutParameters("Stripe", "pk_test_9iwiq8RA0aacvfi350h76350");

    // return data object with store and cart
    return {
        store: myStore,
        cart: myCart
    };
});

我添加了 controller.js 和 app.js 。

任何人都可以帮助我弄清楚为什么UI不变吗？

过滤器有效，但UI不变。 AngularJS

0 个答案: