角度将类添加到跨度元素答案

【问题标题】：angular add class to span element角度将类添加到跨度元素
【发布时间】：2015-03-31 15:33:53
【问题描述】：

我想使用 angular 向 span 元素添加类

<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>

我可以将类添加到父 div，但我需要为 span 元素应用类。

在控制器中，

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

【问题讨论】：

您可以尝试使用 jquery 选择器来实现这一点吗？
他实际上已经在这样做了，angular.element 是 jquery 函数的包装器，当 jquery 可用时。

标签： angularjs

【解决方案1】：

你可以在 HTML 本身上做到这一点。

<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>

【讨论】：

【解决方案2】：

您可以在 span 元素上使用 ngClass 指令，基于您在焦点输入函数上设置的变量。

【讨论】：

【解决方案3】：

你可以这样做：

<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;
  };

【讨论】：