peeli peeli - 4 months ago 11
AngularJS Question

How can I move the ng-repeat filter into the controller and apply ‘active’ class when user clicks?

I have a tabbed slider where can switch the view of the slider by selecting the tab, which is filtering the ng-repeat by property.

How can I move the filter into the controller and apply ‘active’ class when user clicks between the tabs?

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>


controller:

'use strict';

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

$scope.foods = foodSlider;

};

});


a snippet of the service:

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;
});

Answer

The following is what you are expecting?

<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>

EDIT

You can put

$scope.myFilter = {featured:true};

in your controller for getting the first one active initially.

or you can use 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>