I have a list of items that I'm displaying with ng-repeat
. I want to add a filter to show/hide archived items.
I have added a checkbox:
<input type="checkbox" ng-model="queryFilter.archived">Show archived messages
In my controller I have this:
$scope.queryFilter = {
archived: false
};
My list of items is displayed in a table. I've tried the following:
<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">
I get this error:
Error: [filter:notarray]
Expected array but received: {}
The filtering does work but I want to know why I am getting the error.
I had initialised messages
as an object.
Changing $scope.messages = {};
to $scope.messages = [];
made the error go away.
Your messages
must be containing the data in Object
form not in the Array
form.
That is why this error is being thrown. Check the doc https://docs.angularjs.org/error/filter/notarray
From the docs:
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.
So make sure, your $scope.messages
containing data in array form not in the Object form.
queryfilter is an object not an array. So apply the ng-repeat on queryfilter as given below <tr ng-repeat = "message in messages | filter : queryFilter track by $index">
if queryfilter is array then simply use
<tr ng-repeat = "message in messages | filter : queryFilter">
track by $index is necessary whenever we loop the object
The track by $ index makes angular syntax incorrect, since it is directly positioned behind the filter instruction. Try moving it behind the repeat statement so there is a clear separation between the track by and filter statements.
<tr ng-repeat="message in messages | filter : queryFilter track by $index">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.