Блог

Главная - Вопросы по программированию - Фильтр работает, но в пользовательском интерфейсе нет изменений. AngularJS

Фильтр работает, но в пользовательском интерфейсе нет изменений. AngularJS

#html #angularjs

#HTML #angularjs

Вопрос:

Я создаю сайт онлайн-заказа еды, используя 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.

Кто-нибудь, пожалуйста, может помочь мне выяснить, почему пользовательский интерфейс не меняется?

Комментарии:

1. Итак, где используется фильтр? а может быть, вы имеете в виду $scope.category = cat вместо category = cat ?

2. привет @ tsh, спасибо за ответ. Фильтр используется в ng-click = "cart.changeFilter(product.category)" . Я пытался, $scope.category = cat но он показывает ошибку, $scope не определено.

3. Вам нужно ввести $ scope в контроллер, прежде чем вы сможете его использовать, не могли бы вы попробовать настроить plunker, чтобы у нас было, с чем вам помочь.

4. привет @CraigOldfield, я пытался настроить plunker, но безуспешно. Должен ли я предоставить ссылку на github? Поможет ли это?

5. Это не повредит, просто предоставьте как можно больше деталей, чтобы мы могли помочь вам наилучшим образом. Меня больше всего интересует структура ваших контроллеров и т.д.