Wie kann ich den ng-repeat-Filter in den Controller verschieben und die 'aktive' Klasse anwenden, wenn der Benutzer klickt?

Question

Ich habe eine Registerkarte Schieberegler, wo Sie die Ansicht des Schiebereglers wechseln können, indem Sie die Registerkarte, die die ng-Wiederholung nach Eigenschaft filtert.

Wie kann ich den Filter in den Controller verschieben und die 'aktive' Klasse anwenden, wenn der Benutzer zwischen den Registerkarten klickt?

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; 

    }; 

}); 

ein Ausschnitt des Dienstes:

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 1

Das Folgende ist, was Sie erwarten?

<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

können Sie

$scope.myFilter = {featured:true}; 

in Ihrem Controller stellen die erste aktive zunächst für immer.

oder Sie verwenden können 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>