Question

我通过ng-repeat创建了一个带有8张幻灯片的轮播。每张幻灯片包含12个图标。意味着96个图标分为8张幻灯片，每张幻灯片有12个图标。

现在，我将带有ng-model的输入文本字段用于按名称的自定义过滤器。

过滤器无法正常工作，即当我在输入框中放入任何字符串时，它会通过所有8张幻灯片过滤图标，但它也显示带有空白的幻灯片，但它没有找到任何匹配的图标。我需要用过滤结果更新轮播。

即：如果用户输入＆＃39;和＆＃39;在输入文本中，它在幻灯片1,5,9中匹配，然后旋转木马应更新3个匹配的幻灯片1,5,9，其余的幻灯片应从DOM中删除。

如何在angularjs中执行此操作？请帮帮我。

您可以在此处查看工作演示： http://plnkr.co/edit/T0oLp0nG52iPslpa7z9s?p=preview

Answer 1

Angular实际上可以为你做。您可以尝试在每一行中进行过滤。尝试输入“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>

如何使用自定义过滤器过滤使用嵌套ng-repeat创建的轮播

1 个答案: