我正在使用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 功能？
uj5u.com熱心網友回復：
在這種情況下，您需要更新或重新啟動 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312576.html
上一篇：將多個資料發送到同一個陣列