Focus Label when Input is focussed with angular - html

Question

I have a webpage which uses radio button labels as buttons, with inputs hidden
<li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null">
<input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number />
<label class="as-button" for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
</li>
I want my labels to be visibly highlighted when they or their associated hidden inputs are tabbed over.
I found a ready jquery snippet but would prefer to do it in angular.

Answer 1

I found a CSS only solution, since in my case the label comes after the input:
.amounts input:focus + label {box-shadow: 0 0 2px $brand-primary;}
<ul class="list-group amounts">
<li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null">
<input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number ng-focus="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-blur="$parent.hoverPrompt = null"/>
<label class="as-button" for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
</li>

Answer 2

Here is a plunkr that uses ng-focus to apply highlighting to the label when an associated input is focused. ng-blur is used to remove the styling when an element loses focus.
I am simply setting a scope variable called 'highlight' to true when the element is focused, and to false when the element loses focus (blur).
Ng-class is used to conditionally apply css based on my 'highlight' variable.
HTML
<div ng-repeat="data in posts">
<label ng-class="highlight == true ? 'highlight' : '' ">{{data.name}}</label>
<input type="radio" ng-focus="highlight = true" ng-blur="highlight =false" ng-class="highlight == true ? 'highlight' : '' " />
</div>
CSS
.highlight { background-color: yellow;}
ng-focus will not; however, work on a label element. It is limited to inputs.

Answer 3

In label you can use
<label class="as-button" ng-class="{'active': donate.amount == amount.suggestedAmount}"for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
Using ng-class="{'active': boolean} is consistent work on old and new angularjs versions because it base on html class, and also it not stealing focus from another element in your page or lose focus effect if use use tab or click another one. Also I recommend using button group for for those radio button like:
<div class="btn-group" data-toogle="buttons-checkbox">
<label ng-repeat="type in petTypes" class="btn btn-primary" ng-class="{'active': pet.type==type}" ng-click="setPetType(pet,type)">
<input type="radio" name="{{pet.id}}" value="{{type}}" class="sr-only" ng-checked="pet.type==type" required>{{type}}
</label>
</div>
This from my code for my pet control app and it generate new pet when clicking a button, this part is about radio button and it work just fine. Another note is the name is what control which group the input belong to.