Как я могу переместить фильтр ng-repeat в контроллер и применить «активный» класс, когда пользователь щелкает?

0

У меня есть ползунок с вкладками, где можно переключить вид слайдера, выбрав вкладку, которая фильтрует свойство ng-repeat по свойству.

Как переместить фильтр в контроллер и применить "активный класс, когда пользователь щелкает между вкладками?

HTML:

<section class="foodTabSlider" data-ng-controller="sliderCtrl">
  <ul role="list">
    <li ng-click="myFilter = {featured:true}">Featured</li>
    <li ng-click="myFilter = {popular:true}">Popular</li>
    <li ng-click="myFilter = {special:true}">Special</li>
  </ul>
  <figure lightslider id="content-slider" class="content-slider">
    <figure role="listitem" data-ng-repeat="food in foods | filter:myFilter">
      <img src="{{ food.img }}" class="img-responsive">
      <figcaption>{{ food.figcaption }}</figcaption>
    </figure>
  </figure>
</section>

контроллер:

'use strict';

angular.module('myApp').controller('sliderCtrl', function sliderCtrl($scope, foodSlider) {

  $scope.foods = foodSlider;  

  };

});

фрагмент услуги:

angular.module('myApp').factory('foodSlider', function() {
  var factory =
  [
    {
      img: 'images/food-1.png',
      figcaption: 'caption 1',
      featured: true,
      special: true
    },
    {
      img: 'images/food-2.png',
      figcaption: 'caption 2',
      popular: true,
      featured: true
    },
    {
      img: 'images/food-3.png',
      figcaption: 'caption 3',
      special: true
    }

  ]

    return factory;
});
Теги:
angularjs-filter
angularjs-ng-class
angularjs-ng-click

1 ответ

0
Лучший ответ

Что вы ожидаете от следующего?

<section class="foodTabSlider" data-ng-controller="sliderCtrl">
  <ul role="list">
    <li ng-click="myFilter = {featured:true}"
        ng-class="{'active':myFilter.featured}">Featured</li>
    <li ng-click="myFilter = {popular:true}
        ng-class="{'active':myFilter.popular}"">Popular</li>
    <li ng-click="myFilter = {special:true}"
        ng-class="{'active':myFilter.special}">Special</li>
  </ul>
  <figure lightslider id="content-slider" class="content-slider">
    <figure role="listitem" data-ng-repeat="food in foods | filter:myFilter">
      <img src="{{ food.img }}" class="img-responsive">
      <figcaption>{{ food.figcaption }}</figcaption>
    </figure>
  </figure>
</section>

РЕДАКТИРОВАТЬ

Вы можете положить

$scope.myFilter = {featured:true};

в вашем контроллере для получения первого активного.

или вы можете использовать ng-init:

<section class="foodTabSlider" data-ng-controller="sliderCtrl">
  <ul role="list" ng-init="myFilter = {featured:true}">
    <li ng-click="myFilter = {featured:true}"
        ng-class="{'active':myFilter.featured}">Featured</li>
    <li ng-click="myFilter = {popular:true}
        ng-class="{'active':myFilter.popular}"">Popular</li>
    <li ng-click="myFilter = {special:true}"
        ng-class="{'active':myFilter.special}">Special</li>
  </ul>
  <figure lightslider id="content-slider" class="content-slider">
    <figure role="listitem" data-ng-repeat="food in foods | filter:myFilter">
      <img src="{{ food.img }}" class="img-responsive">
      <figcaption>{{ food.figcaption }}</figcaption>
    </figure>
  </figure>
</section>
  • 0
    это работает, спасибо, как вы думаете, это лучше сделать через контроллер? Есть ли разница?
  • 0
    это проще , я думаю, во всяком случае myFilter это $scope переменной :)
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню