时间戳

首页 > 解决方案 > AngularJS 光滑的轮播按属性过滤

angularjs - AngularJS 光滑的轮播按属性过滤

问题描述

我正在使用https://github.com/devmark/angular-slick-carousel 我想添加一个搜索过滤器，因此它只会显示在其“data-test-id”属性中具有“searchStr”的幻灯片.

HTML：

    <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 功能？

标签： angularjsslick

解决方案

在这种情况下，您需要更新或重新启动 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和我ng-if在slick. 这是不同的部分。

在您的控制器中，您需要：

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

另外，考虑到您必须timeout在控制器中导入。

您可以使用我刚刚制作的这个示例：https ://plnkr.co/edit/1v3DYmfLyqvjedKz

推荐阅读