AngularJS ng-repeat with filter - notarray 错误

Question

我有一个要用 ng-repeat 显示的项目列表。我想为 show/hide 个归档项目添加过滤器。

我添加了一个复选框：

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

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

$scope.queryFilter = {
    archived: false
};

我的项目列表显示在 table 中。我试过以下方法：

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

我收到这个错误：

Error: [filter:notarray]

Expected array but received: {}

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

Answer 1

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

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

来自文档：

Filter must be used with an array so a subset of items can be returned. The array can be initialized asynchronously and therefore null or undefined won't throw this error.

因此请确保您的 $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 是对象而不是数组。因此，如下所示在查询过滤器上应用 ng-repeat <tr ng-repeat = "message in messages | filter : queryFilter track by $index">

如果 queryfilter 是数组，那么只需使用

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

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

AngularJS ng-repeat with filter - notarray 错误

AngularJS ng-repeat with filter - notarray error

angularjs

angularjs-ng-repeat

angularjs-filter