My objective is to create a Letter Filter, where users can click on buttons from A to Z to filter the displayed data. When clicking on the letter 'A' button, only data starting with 'A' should be shown.
However, I have encountered an issue with the ng-repeat filter returning 'undefined'. Each time I click on an Alphabet button, the $scope.filterActive parameter reverts to undefined, while $scope.active retains the clicked alphabet.
https://i.sstatic.net/LBVR5.png
Here is my Angular code:
$scope.alphabet = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
$scope.active = null;
$scope.setActiveLetter = function(letter) {
$scope.active = letter.toLowerCase();
$scope.selectedLetter = letter.toLowerCase();
};
$scope.filterActive = function(value) {
if ($scope.active) {
// return value.charAt(0).toLowerCase() === $scope.active;
}
return true;
}
And here is the view portion of the code:
<button type="button" class="btn-alphabet btn btn-default" ng-bind="letter" ng-repeat="letter in alphabet" ng-click="setActiveLetter(letter)" ng-class="{'btn-primary': letter==active}">{{ letter }}</button>
<div class="manufacturers-content" ng-repeat="data in manufacturers | filter:filterActive">
<a ui-sref="manufacturersDetail({id: data.id})">
{{ data.name }} <span>({{ data.documents.length }})</span>
</a>
</div>
I have referenced this article for guidance:
Lastly, my JSON Data is retrieved using $http.get and consists of multiple entries, which are then filtered based on user selection.
1:{id: "53", name: "TEST 0", documents: Array(5), $$hashKey: "object:34"}
2:{id: "69", name: "Test 1", documents: Array(7), $$hashKey: "object:36"}
3:{id: "46", name: "Test 2", documents: Array(45), $$hashKey: "object:38"}
4:{id:"70", name: "Test 3", documents: Array(2), $$hashKey: "object:40"}