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

私はこのエラーを取得する：フィルタリングは仕事を行い

Error: [filter:notarray]

Expected array but received: {}

が、私は、私はエラーを取得しています理由を知りたいです。

Answer 1

messagesには、Arrayの形式ではなく、Objectのデータが含まれている必要があります。

これがこのエラーが発生した理由です。ドキュメントからドキュメントに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によるトラックは、フィルタ命令の背後に直接配置されているため、角度構文を不正確にします。 repeat文の後ろに移動して、トラックの文とフィルタ文の間に明確な分離があるようにしてください。

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

Answer 3

私はオブジェクトとしてmessagesを初期化していました。

$scope.messages = {};から$scope.messages = [];に変更すると、エラーが表示されなくなりました。

Answer 4

queryfilterは配列ではないオブジェクトです。 <tr ng-repeat = "message in messages | filter : queryFilter track by $index">

以下に示すように、NGリピートはqueryfilterが配列の場合、単純に$インデックスによって

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

トラックはいつでも私たちはループオブジェクト