AngularJS ng-repeat with filter语言 - notarray error

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">

我收到此错误：

错误： [过滤器：非阵列]

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

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

Answer 1

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

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

Answer 2

您的messages必须以Object形式而不是Array形式包含数据。

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

从文档中：

筛选器必须与数组一起使用，以便可以包含项目子集 返回。数组可以异步初始化，因此 null 或未定义不会引发此错误。

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

Answer 3

按 $ 索引跟踪使角度语法不正确，因为它直接位于过滤器指令的后面。尝试将其移动到重复语句后面，以便在跟踪依据和筛选语句之间有明确的分离。

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

Answer 4

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

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

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

每当我们循环对象时，都需要按$index跟踪