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 - http://plnkr.co/edit/qpSZJ6FjFyejAwUUhviz?p=preview — Vasyl, Jul 24 '15 at 13:31

score 1 · Answer 1 · edited May 23 '17 at 12:21

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

Angular JS filter in slider

1 Answers1