Custom Angular filter never called?
I have an array of strings that I would like to filter by first letter using angular custom filter.
I have the following setup ng-repeat
:
<div ng-repeat="proverb in proverbs | firstLetter">
<a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
</div>
And this is my custom filter, currently using the default email "A"
for testing purposes:
angular
.module('raidersApp', [
'ngRoute',
'ngTouch',
'ngResource'
])
.filter('firstLetter', function () {
return function (input) {
input = input || [];
letter = "A";
var out = [];
input.forEach(function (item) {
console.log("current item is", item, item.charAt(0));
if (item.charAt(0).toUpperCase() == letter) {
out.push(item);
}
});
return out;
};
})
The problem is that this filter is currently filtering everything (the application is running, and there are no console errors, but the section is ng-repeat
empty) and is console.log
never displayed.
What's missing?
source to share
You need to post more of your code. Your problem is likely related to the way you structured your application.
Here's a similar filter that does what I think you are looking for:
var app = angular.module('raidersApp', [])
.controller('myController', function($scope) {
$scope.langID = "en";
$scope.proverbs = ['Apple', 'Apricot', 'Banana', 'Orange'];
})
.filter('firstLetter', function() {
return function(input, letter) {
return (input || []).filter(function(item) {
return item.charAt(0).toUpperCase() === letter;
});
};
});
<html ng-app="raidersApp">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-controller='myController'>
<h3>A</h3>
<div ng-repeat="proverb in proverbs | firstLetter: 'A'">
<a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
</div>
<h3>O</h3>
<div ng-repeat="proverb in proverbs | firstLetter: 'O'">
<a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
</div>
</div>
</body>
</html>
From what I can tell, your code works as is.
var app = angular.module('raidersApp', [])
.controller('myController', function($scope) {
$scope.langID = "en";
$scope.proverbs = ['Apple', 'Apricot', 'Banana', 'Orange'];
})
.filter('firstLetter', function() {
return function(input) {
input = input || [];
letter = "A";
var out = [];
input.forEach(function(item) {
console.log("current item is", item, item.charAt(0));
if (item.charAt(0).toUpperCase() == letter) {
out.push(item);
}
});
return out;
};
});
<html ng-app="raidersApp">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-controller='myController'>
<div ng-repeat="proverb in proverbs | firstLetter">
<a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
</div>
</div>
</body>
</html>
source to share
Follow your syntax!
input.forEach()
throws me an error .. also watch out for globals declaration.
Try the following:
.filter('firstLetter', function () {
return function (input) {
var input = input || [];
var letter = "A";
var out = [];
angular.forEach(input, function (item) {
console.log("current item is", item, item.charAt(0));
if (item.charAt(0).toUpperCase() == letter) {
out.push(item);
}
});
return out;
};
})
source to share