AngularJS slick carousel按属性过滤

bmvo0sr5  于 2023-10-15  发布在  Angular
关注(0)|答案(1)|浏览(104)

我正在使用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函数?

kadbb459

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

相关问题