Angular JS filter in slider

Question

I have to create slider (actually I'm using flexslider), with data in ng-repeat but also with filter buttons. I created that code:

Filter

<div class="terms">
            <button ng-click="myFilter = {terms: 'advertising'}">Advertising</button>
        <button ng-click="myFilter = {terms: 'branding'}">Branding</button>
        <button ng-click="myFilter = {terms: 'packaging'}">Packaging</button>
        <button ng-click="myFilter = {terms: 'print'}">Print</button>
        <button ng-click="myFilter = {terms: 'video'}" class="">Video</button>
        <button ng-click="myFilter = {terms: 'web'}" class="active">Web</button>
                <button ng-click="myFilter = {terms: ''}" class="">All</button>
    </div>

Slider

 <div class="flexslider" id="project_slider">
            <ul class="slides">
                <li ng-repeat="slide in slides | filter: myFilter">
                    <a href="{{ slide.link }}"><img src="{{ slide.img }}"></a>
                </li>
            </ul>
        </div>

Then after document ready offcourse I init slider:

$(document).ready(function() {
   $('#project_slider').flexslider({
      controlNav: false,
   });
});

And slider works fine, but without filtering. The problem - I think - is with filter, when I add or remove data by Angular, slider is not reinitialized. Any suggestions?

flexslider and terms in same scope? Maybe myFilter is not defined? Prepared small example which doing same job with phonebook, click on buttons - plnkr.co/edit/qpSZJ6FjFyejAwUUhviz?p=preview — Vasyl
– Vasyl, Commented Jul 24, 2015 at 13:31

Community · Accepted Answer · 2017-05-23 12:21:45Z

1

You can create a directive and call the flexislider when the last ng-repeat is rendered.

Example:

.directive('someDirective', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
      $('#project_slider').flexslider({
         controlNav: false,
      });
    }
  };
})

    <div class="flexslider" id="project_slider">
        <ul class="slides">
            <li ng-repeat="slide in slides | filter: myFilter" some-directive> //<-- added the directive
                <a href="{{ slide.link }}"><img src="{{ slide.img }}"></a>
            </li>
        </ul>
    </div>

Extracted from: ng-repeat finish event

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 24, 2015 at 13:06

nada

9825 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS filter in slider

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related