Menu
I have an array of strings which I'd like to filter by first letter using a custom angular filter.
I have the following ng-repeat set up:
<div ng-repeat="proverb in proverbs | firstLetter">
<a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
</div>
And this is my custom filter, currently using a default letter "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, this filter is currently filtering everything out (the app works and there are no console errors but the ng-repeat section is blank), and the console.log is never even being displayed.
What's missing?
499
You need to post more of your code. Your problem is most likely an issue with how you structured your app.
Here is 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>Watch your syntax!
input.forEach()
was throwing an error for me.. also watch out for declaring global variables.
Try this:
.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;
};
})
http://plnkr.co/edit/XtFQlCWX27gEy0PeQCwv?p=preview
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
