ネストされたng-repeatで作成されたカルーセルをカスタムフィルタでフィルタリングする方法

Question

ng-repeatから8個のスライドでカルーセルを作成しました。各スライドには12のアイコンが含まれています。 96個のアイコンがスライドごとに12個のアイコンで8個のスライドに分割されていることを意味します。

ここでは、アイコンの名前でカスタムフィルタの入力テキストフィールドをng-modelとしました。

フィルタが正しく動作しません。つまり、入力ボックスに文字列を入力すると、8つのスライドすべてでアイコンがフィルタリングされますが、一致するアイコンが見つからなかった空白のスライドも表示されます。私はフィルターの結果でカルーセルを更新する必要があります。

つまり、ユーザーが入力テキストに 'と'を入力してスライド1,5,9と一致する場合、カルーセルは3つの一致するスライド1,5,9で更新され、残りのスライドはDOMから削除されます。

angularjsでの操作方法は？私を助けてください。

あなたはここで働いデモを見ることができます： http://plnkr.co/edit/T0oLp0nG52iPslpa7z9s?p=preview

Answer 1

角度は、実際のuのためにそれを行うことができます。各行でフィルタリングを実行できます。テストする "a"を入力してください。

const App = angular.module("a", []); 
 

 
App.controller("test", function($scope) { 
 
    $scope.data = [ 
 
    ["abc", "bcd", "cde", "def", ], 
 
    ["bcd", "cde", "def", "efg", ] 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<div ng-app="a"> 
 
    <div ng-controller="test"> 
 
    <input ng-model="search"> 
 
    <div ng-repeat="row in data | filter:search" style="height:30px;background:antiquewhite;"> 
 
     <span ng-repeat="d in row | filter:search" ng-bind="d" style="margin-right:10px;"> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>