Within my code, I have implemented a feature to display an h4 element stating that there are no products found if the search query does not match any strings. However, I am encountering a strange bug where the text fails to appear as intended. Interestingly, the text becomes visible after interacting with elements that have click event bindings or making edits to the color in the CSS console. Despite trying numerous solutions, the issue persists. Any insights on what might be causing this behavior and how I can resolve it would be greatly appreciated.
The implementation looks like this:
<h4 ng-show="filteredItems.length == 0" class="explanation">We found no products</h4>
CSS styling:
h4 {
color: #ccc;
text-align: center;
padding: 100px 20px;
}
Search functionality:
$scope.searchItem = function(query) {
var foundItems = [];
query.toLowerCase();
if (searchTimeout)
$timeout.cancel(searchTimeout);
searchTimeout = $timeout(function() {
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].name.toLowerCase().indexOf(query) > -1)
foundItems.push($scope.items[i]);
}
$scope.filteredItems = foundItems;
}, 400);
}
EDIT
// fill with dummy data
$scope.define = function() {
var random;
for (var i = 0; i < 114; i++) {
random = Math.floor(Math.random() * 6) + 1;
var text;
switch(random) {
case 1:
text = 'Double espresso';
break;
case 2:
text = 'Frappuccino cookie crumble chocolate';
break;
case 3:
text = 'Cappuccino';
break;
case 4:
text = 'Very Berry Hibiscus Starbucks Refreshers™ Beverage';
break;
case 5:
text = 'Clover® Brewed Coffee Coffee Traveler';
break;
case 6:
text = 'Featured Dark Roast';
break;
default:
text = 'Not defined';
}
$scope.data.items.push({ name: text, image: random });
}
// Uncomment everything works
//$scope.data.filteredItems = $scope.data.items;
}
$scope.define();