angular add class to span element

Question

I want to add class to span element using angular

<div class="input-group textbox-wrap fade-in two">                      
   <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>                         
   <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" 
      required="required" data-ng-model="username" ng-focus="focusInput($event)" ng-blur="blurInput($event)" autofocus />
</div>

I am able to adding the class to parent div but i need to apply class for span element.

In the controller,

$scope.focusInput= function($event )
  {
    angular.element($event.target).parent().addClass('focused');    
  };

He's actually already doing that, angular.element is a wraper for the jquery function, when jquery is available. — Ygor Cardoso
– Ygor Cardoso, Commented Mar 31, 2015 at 7:16

Pankaj Parkar · Accepted Answer · 2015-03-31 07:31:16Z

1

You could do it on HTML itself.

<div class="input-group textbox-wrap fade-in two">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" 
       required="required"  ng-class="'focused':focused"
    data-ng-model="username" ng-focus="focused=true" ng-blur="focused=false" autofocus />
</div>

answered Mar 31, 2015 at 7:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ygor Cardoso · Accepted Answer · 2015-03-31 07:14:57Z

1

You could use ngClass directive on the span element, based on a variable you set on the focus input function.

answered Mar 31, 2015 at 7:14

Ygor Cardoso

2613 silver badges13 bronze badges

Comments

Bazinga · Accepted Answer · 2015-03-31 07:18:35Z

1

You can do this:

<div class="input-group textbox-wrap fade-in two">                      
   <span class="input-group-addon" ng-class="{'yourClass': inputFocused}"><i class="glyphicon glyphicon-user"></i></span>                         
   <input type="text"  class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" 
      required="required" data-ng-model="username" ng-focus="focusInput()" ng-blur="blurInput($event)" autofocus />
</div>

$scope.focusInput= function($event )
  {
    $scope.inputFocused = true;
  };

answered Mar 31, 2015 at 7:18

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

Collectives™ on Stack Overflow

angular add class to span element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related