Question

我有一个输入字段，我想有条件地应用CSS类。

例如，如果firstName == undefined应用CSS类ng-dirty。所以，我试过

<input required [(ngModel)]="customer.firstName" name="firstName"           
       type="text" minlength="2" maxlength="50" ng-class="{ng-dirty : customer.firstName === undefined}">

然而，它不起作用。

Answer 1

你可以试试这个：

<input required [(ngModel)]="customer.firstName" name="firstName"           
       type="text" minlength="2" maxlength="50" [class]="(customer.firstName == undefined) ? 'dirty' : ''" >

但我认为 customer.firstName 不会被定义，因为您在将它放入模型时已定义它。

Answer 2

Js对象表示法不能 - 破折号所需要的是一个引用它的引用

<input required [(ngModel)]="customer.firstName" name="firstName"           
   type="text" minlength="2" maxlength="50" ng-class="{'ng-dirty' : customer.firstName === undefined}">

Answer 3

如果您使用的是Angular 2 / Angular 4，则以下是NgClass

的条件语法

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

如果您使用angularJs（即angular 1.x），请使用下面的

<some-element ng-class="{'fist' : true, 'second': true}">...</some-element>

Official Docs for Angular4 [NgClass]

Official DOcs for AngularJS ng-class

希望这有助于：）

在输入元素上应用条件css类

3 个答案: