I am currently working with an array of objects that are being assigned to the $scope within a controller. These objects are then filtered in multiple div elements within a partial template:
<div class="entity-list">
<!-- Folders -->
<div class="entity-listing folder" ng-repeat="child in folders | filterName:nameFilter | entityType:filterType | orderBy:orderProp:orderAscDesc">
<!-- Some HTML -->
</div>
<!-- Files -->
<div class="entity-listing document" ng-repeat="child in documents | filterName:nameFilter | entityType:filterType | orderBy:orderProp:orderAscDesc">
<!-- Some HTML -->
</div>
</div>
The filters can be found within a separate fieldset element:
<fieldset id="filters">
<legend>Filters</legend>
<label for="filter-name">Name Contains:</label>
<input id="filter-name" ng-model="nameFilter">
<label for="filter-type">Show:</label>
<select id="filter-type" ng-model="filterType">
<!-- some options -->
</select>
<label for="sort-field">Sort By:</label>
<select id="sort-field" ng-model="orderProp">
<!-- some options -->
</select>
<select ng-model="orderAscDesc">
<!-- some options -->
</select>
</fieldset>
I have incorporated two filters within a module, and then passed that module into my app:
angular.module('widget', ['filters']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/homefolder', {templateUrl: 'widget/partial/entity-list.html', controller: HomeFolderCtrl}).
when('/folder/:uuid', {templateUrl: 'widget/partial/entity-list.html', controller: FolderCtrl}).
otherwise({redirectTo: '/homefolder'});
}]);
angular.module('filters', []).
filter('entityType', function() {
return function(items, type) {
var returnArray = [];
for (var i=0,ii=items.length;i<ii;i++) {
if (type == "both") {
returnArray.push(items[i]);
} else if (items[i].type == type) {
returnArray.push(items[i]);
}
}
return returnArray;
}
}).
filter('filterName', function() {
return function(items, str) {
var returnArray = [];
if (str != '') {
for (var i=0,ii=items.length;i<ii;i++) {
if (items[i].name.indexOf(str) !== -1) {
returnArray.push(items[i]);
}
}
} else {
returnArray = items;
}
return returnArray;
}
});
However, I am encountering errors in the error console stating
Cannot read property 'length' of undefinedfilterName and entityType filters' for loops. To address this issue, I wrapped those filters in an if statement to check if items is defined (as seen in the modified filterName):
filter('filterName', function() {
return function(items, str) {
var returnArray = [];
if (items) {
if (str != '') {
for (var i=0,ii=items.length;i<ii;i++) {
if (items[i].name.indexOf(str) !== -1) {
returnArray.push(items[i]);
}
}
} else {
returnArray = items;
}
}
return returnArray;
}
});
This modification eliminates the error and allows the code to function correctly. However, I am left wondering why AngularJS would pass in undefined items to the filters. Where else could these filters be getting called if they are only explicitly utilized in my two ng-repeat directives?