AngularJS slick carousel filter by attribute-CodePudding

I'm using https://github.com/devmark/angular-slick-carousel And i want to add a search filter, so it will show only the slides who has "searchStr" in their "data-test-id" attribute.

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

How should i use the slickFilter function?

CodePudding user response：

In that case, you need to update or relaunch slick-carousel. So, it'd be pretty simple and almost like any other filter:

Your view:

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

But, as you see the input has an ng-change and I have ng-if on the slick. It's the different part.

In your controller you need:

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

Also, take into consideration you have to import timeout in your controller.

You can play with this example which I just made: https://plnkr.co/edit/1v3DYmfLyqvjedKz