带有过滤器的AngularJS ng-repeat-notarray错误

Question

我有一个用ng-repeat 显示的项目列表。我想添加一个过滤器来显示/隐藏归档项目。

我添加了一个复选框：

<input type="checkbox" ng-model="queryFilter.archived">Show archived messages

在我的控制器中，我有这个：

$scope.queryFilter = {
    archived: false
};

我的项目列表显示在表格中。我尝试了以下方法：

<tr ng-repeat="message in messages | filter : queryFilter">

<tr ng-repeat="message in messages | filter : { archived: queryFilter.archived }">

<tr ng-repeat="message in messages | filter : queryFilter track by $index">

我收到此错误：

错误：[过滤器：notarray]

预期的数组但已收到：{}

过滤确实有效，但我想知道为什么会出现错误。

Answer 1

您的messages 必须包含Object 表单中的数据，而不是Array 表单中的数据。

这就是抛出此错误的原因。查看文档https://docs.angularjs.org/error/filter/notarray

来自文档：

过滤器必须与数组一起使用，以便可以将项目的子集 回来。数组可以异步初始化，因此 null 或 undefined 不会抛出此错误。

所以请确保您的 $scope.messages 包含数组形式的数据，而不是对象形式的数据。

Answer 2

$ index 的跟踪使 Angular 语法不正确，因为它直接位于过滤器指令的后面。尝试将其移到 repeat 语句之后，以便在 track by 和 filter 语句之间有一个清晰的分隔。

<tr ng-repeat="message in messages | filter : queryFilter track by $index">

Answer 3

我已经将messages 初始化为一个对象。

将$scope.messages = {}; 更改为$scope.messages = []; 使错误消失。

Answer 4

queryfilter 是一个对象而不是数组。因此，如下所示在 queryfilter 上应用 ng-repeat <tr ng-repeat = "message in messages | filter : queryFilter track by $index">

如果查询过滤器是数组，那么只需使用

<tr ng-repeat = "message in messages | filter : queryFilter">

每当我们循环对象时，都需要通过 $index 进行跟踪