AngularJS slick carousel按属性过滤

bmvo0sr5 于 8个月前发布在 Angular

关注(0)|答案(1)|浏览(62)

我正在使用https://github.com/devmark/angular-slick-carousel，我想添加一个搜索过滤器，这样它将只显示“data-test-id”属性中有“searchStr”的幻灯片。
超文本标记语言：

<slick settings="slickConfig" >
    <div ng-repeat="i in number"
         data-test-id="{{i.title}}"
         class="slick-item">
        {{i.title}}
</div>
</slick>

JS：

$scope.slickConfig.method.slickFilter(searchStr);

如何使用slickFilter函数？

angularjs

来源：https://stackoverflow.com/questions/69345107/angularjs-slick-carousel-filter-by-attribute

1条答案

按热度按时间

kadbb4591#

在这种情况下，您需要更新或重新启动slick-carousel。所以，它非常简单，几乎像任何其他过滤器一样：
您的观点：

<!-- You have Your Filter -->
<input type="text" ng-model="filter" ng-change="updateNumber4()"/>

<!-- You have your SlickCarousel, it's important to include ng-if -->
<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">

  <!-- IMPORTANT: I'm filtering in ng-repeat by the ng-model in the input -->
  <div ng-repeat="i in number4 | filter:filter" >
    <div style="width:{{ i.label }}px;height:100px; background:{{i.background}}">{{i.label}}</div>
  </div>
</slick>

但是，正如你所看到的，input有一个ng-change，我在slick上有ng-if。是不同的部分。
在您的控制器中，您需要：

$scope.updateNumber4 = function () {
  $scope.slickConfig4Loaded = false;
  $timeout(function() { 
    $scope.slickConfig4Loaded = true;
  });
};

另外，请注意，您必须在控制器中导入timeout。
你可以用我刚才做的这个例子来玩：https://plnkr.co/edit/1v3DYmfLyqvjedKz

赞(0）回复(0）举报 8个月前

我来回答

AngularJS slick carousel按属性过滤

1条答案

相关问题

热门标签

最新问答