AngularJS光滑轮询器过滤器的属性

Question

我使用https://github.com/devmark/angular-slick-carousel我还想添加一个搜索过滤器，这样它就只会显示有搜索字符串的幻灯片。在他们的"data-test-id"中属性。

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

我应该如何使用slikfilter功能?

Answer 1

在这种情况下，需要更新或重新启动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