繁体   English   中英

angular添加类到span元素

angular add class to span element

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想使用angular添加class to 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');    
  };
3 个回复

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

你可以这样做:

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

你可以在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>
1 Angular:将类添加到跨度选择器

我有以下代码,我想向跨度选择器添加一个类,但出现此错误 无法读取 null 的属性“classList” &lt;th *ngFor="let column of columns;" &lt;ng-container *ngIf="column?.sortable"&gt; ...

2 span 元素上的动态 css 类 - angular 4

我在表中有一个跨度元素。 我想根据值动态更改 css 类。 这是我的 html 代码: 我想根据我得到的数据显示徽章颜色。 例如,如果我变红了,我想将徽章类别更改为徽章危险。 如果我变绿了,我想将课程更改为徽章成功等等。 我如何在角度 4 中实现这一目标? 谢谢 ...

3 span 元素上的动态 css 类 - angular 7

我在 ngx 数据表中有一个 span 元素。 我想根据值动态更改 css 类。 这是我的 html 代码: 在上面我需要根据条件应用类 听到上课成绩无法得到你能告诉我是什么原因吗?? 下面是引导类 ...

4 添加类以使用onClick javascript覆盖元素

我正在寻找几个小时的解决方案,但找到了一些答案,但不是一个很合适的答案。 我有几个&lt;span id="same-id-for-all-spans"&gt;&lt;/span&gt;元素,每个元素都包含一个&lt;img&gt;元素。 现在,我想创建一个打印模板,只打印那些添加了特定 ...

5 将类添加到父范围元素jQuery

我正在尝试将复选框父元素(跨度)的类更改为选中。 我正在按照以下步骤操作,但出现错误: $ checkbox.parentNode.addClass不是HTMLInputElement的函数。 这是网站 这是JS代码: ...

6 将类添加到Angular 4中的元素

我试图用Angular 4创建一个图库。这背后的逻辑是为所选图像添加一个层叠样式表(CSS)类,它将在所选(单击)图像上显示红色边框。 这是图库的CSS样式表。 我想在我点击的图像上显示一个红色选区。 应将this-is-a-class添加到所选图像中。 #container{ ...

7 Angular JS:将类添加到元素

我在做下一件事。 我想在其边界突出显示的输入中输入空值(添加了新类“警告”)。 我创建了以下代码。 HTML: JavaScript: 但是addClass的使用不起作用。 我究竟做错了什么? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM