标签: ng-class

这非常简单,但我无法改变课程.

我基本上验证日期是否格式正确(DD-MMM-YYYY hh:mm:ss).

<input type="text" style="width : 80%" ng-model="startTime" ng-class="{invalid: !isValid ,valid: isValid}" />

其中isValid是一个范围变量,其值为true和false.不应用css类.

这是plnkr.

我想将一个条件类应用于页面上的元素.

目前它正在使用以下代码:

ng-class="{ 'vfnz-form--error' : loginForm.username.$invalid  }

如果输入字段无效,则应用无效类.我想在用户输入字段有效时应用" 有效"类.

这可能是在同一行代码中实现的吗？

这是一个小提琴示例:JSFIDDLE

我有一个可折叠的手风琴使用ng-repeat来呈现它的选项.在右边有一个向下的glyphicon.单击并展开作业后,此glyphicon应朝上.

更新:使用Amine的响应,单击的标题会得到一个glyphicon-down.但是当折叠并在外部点击时,glyphicon会在设置索引时保持向下,并且在折叠时实际上需要再次面向上方.再次单击该项时,如何将$ index设置为undefined？

我的代码:

<div class="col span_2_of_3">
        <div ng-repeat="item in jobs">
            <accordion>
                <accordion-group ng-click="state.selected = $index">
                    <accordion-heading>
                        <h2>
                            "{{item.title}}"
                            <i class="pull-right glyphicon "
    ng-class="{'glyphicon-chevron-up': $index == state.selected,
          'glyphicon-chevron-down': $index != state.selected }"
                            ng-click="state.selected = $index"
                            ></i>
                        </h2>
                    </accordion-heading>
                    {{item.description}}
                </accordion-group>
            </accordion>
        </div>
    </div>

在我的控制器中我有:

$scope.state = { selected: undefined };

我想使用 ng-class 应用多个类

ng-class="func1();function2()"  

这会引发错误。

我必须只在一个函数中写完整吗？

我不能像上面那样调用两个函数或任何正确的语法来做同样的事情吗？

我想补充一类another-class基于使用情况如下ng-class.是有可能,除去another-class使用ng-class时的条件没有被满足？现在,another-class即使条件不满足,该类仍然保留在元素中!

<div ng-hide="ok.isTrue" ng-class = "'{{ok.Id}}' === '{{notok.Id}}' ? 'another-class': '' ;" class="some-class">

我写了以下代码:

 <style>
    .dotted {
         border:dotted;
     }
 </style>

....

 <p ng-style = "mystyle"  ng-class="dotted "> {{ answer }} </p>

我的目的是

元素将放在虚线边框线内.它不起作用.我查看了Angular文档(https://docs.angularjs.org/api/ng/directive/ngClass),我看到了:

如果表达式求值为字符串,则该字符串应为一个或多个以空格分隔的类名.

我知道ng-class可能包含我在-tag中定义的类名.那么......我做错了什么？

为什么在离子应用程序ngClass不起作用,但在离子内容它工作？

这是我的html代码行

<ion-app [ngClass]="'blur-background'"></ion-app>

提前致谢

我想根据课程中存在的价值来展示课程。

ng-if="data.percentage >= 0  & data.percentage < 25"
ng-if="data.percentage >= 25 & data.percentage < 50"
ng-if="data.percentage >= 50 & data.percentage < 75"
ng-if="data.percentage >= 75 & data.percentage <= 100"

.firstLabel
.secondLabel
.thirdLabel
.fourthLabel

例如，如果 in 中的值为data.percentage75，那么我的输出 div 应该如下所示。

<div ng-class="fourthLabel" > </div>

感谢您的帮助。

所以我的代码是 Angular 版本 5。

我有一个带有图标的按钮。我正在尝试使图标动态化。所以我想在发送图标fa fa-paper-plane和加载图标之间切换fa fa-spinner fa-spin。当我发送消息时，我应该显示旋转器，当我收到消息时，我应该显示纸飞机图标。

案例1）我fa一起给了fa-spinner，但fa-paper-plane没有用。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': true, 'fa fa-paper-plane': false }" aria-hidden="true" title="send"></i>
  </button>
</div>

这是下面的输出，我得到一个方形图标而不是旋转图标。

案例 2) 在这方面，我也给出了fa和fa-spinner fa-spinfa-paper-plane

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': false, 'fa fa-paper-plane': true }" aria-hidden="true" title="send"></i>
  </button>
</div> 

所以现在发生了这种情况。

现在你可以看到，在这两种情况之间，我刚刚交换了 true false 值。所以我得出的结论是，我的旋转器不工作。但这件事发生了，

情况 3 )我再次给出了fa和 …

我有一个数组,有5个字符串值兴奋,快乐,中立,悲伤,愤怒

我使用ngClass和ngFor来简化html,所以我不必为每个值重复5x.

问题是ngClass语句非常笨重,我找不到合适的方法来简化它.有什么方法可以缩短它吗？

<mat-icon *ngFor="let smiley of smileys" svgIcon="emote_{{smiley}}" 
                [ngClass]="{ happy: smiley === 'happy', sad:  smiley === 'sad', neutral:  smiley === 'neutral', angry:  smiley === 'angry', excited:  smiley === 'excited'}" (click)="selected(smiley, $event)"></mat-icon>

先感谢您!