Say I've got an Angular $resource that returns an array of entries that all have a name attribute. I would like to use $filter in Javascript (not using Angular's {{ blah | filter:filter }} syntax within the templates) to extract a subset of those entries based on the attribute.
The code would look something like:
app.controller('AppController', function ($scope, Project, $filter) {
$scope.entries = Project.query();
$scope.entry = $filter('filter')($scope.entries, {name: 'Bar'});
...
}
However, as illustrated in this jsFiddle here, the snippet won't work as intended. entry will contain an empty array regardless of what entries gets populated with asynchronously, when the XHR completes. Setting up a $scope.$watch also doesn't work.
I want to update entry according to the filter when entries is populated with data. How can I do this?
Okay, I was pretty much done with my question when I experimented a bit more and found that I could do this by supplying a success callback to the query() call:
app.controller('AppController', function ($scope, Project, $filter) {
$scope.entries = Project.query({}, function() {
$scope.entry = $filter('filter')($scope.entries, {name: 'Bar'});
});
...
}
See the updated jsFiddle.