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?

Answer 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