I'm currently working on a feature for an app that allows users to select font styles from Google Fonts for specific text elements.
Here's the code snippet I have so far:
<ul ng-init='headerFont="mono"'>
<li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='headerFont = font'>{{font}}
</li>
</ul>
Later on, I use this code to display the selected font:
<h1 style='font-family: {{headerFont}};'>Header</h1>
In my JavaScript controller file, I define the list of available fonts like this:
$scope.fonts = [...an array of font names...]
Initially, instead of using ng-repeat with <li>, I had a different approach:
<select ng-model='headerFont' style='font-family: {{headerFont}};'>
<option ng-repeat='font in fonts' style='font-family:{{font}};'>{{font}}
</option>
</select>
This method worked perfectly as expected. However, I decided to switch to a scrollable list rather than a dropdown menu because the <select> element doesn't allow changing individual font styles within options on mobile browsers. It was essential for users to preview fonts before making a selection. Although I attempted to update the font selection using ng-click to set the headerFont value, it seems not to be functioning (no errors are displayed in the console either). Can someone provide insight into why this might be happening?