javascript - slider 中的 Angular JS 过滤器

Question

我必须创建 slider (实际上我正在使用 flexslider)，数据在 ng-repeat 中，但也有过滤器按钮。我创建了该代码:

过滤器

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

然后在文档准备好后我初始化 slider :

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

slider 工作正常，但没有过滤。问题 - 我认为 - 与过滤器有关，当我通过 Angular 添加或删除数据时， slider 不会重新初始化。有什么建议吗？

Answer 1

您可以创建一个指令并在呈现最后一个 ng-repeat 时调用 flexislider。

例子:

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

摘自:ng-repeat finish event