Question

我必须创建滑块（实际上我正在使用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>

滑块

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

然后在文件准备好后，我初始化滑块：

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

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

Answer 1

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

示例：

.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

滑块中的Angular JS过滤器

1 个答案: