根据角度 js 应用程序中的条件动态添加类

Adding class dynamically based on condition in angular js app

本文关键字：条件 动态 添加 应用程序 js      更新时间：2023-09-26

在我的一个应用程序中，当它有任何数据时，我需要添加一个特定的类，无论它的输入类型（电子邮件、文本）如何，使用 AngularJS：

在此 plunk 中，只需在文本框中键入任何内容即可更改边框颜色。

参考代码 

<body ng-app="">
    <input type='text' ng-model='Custom' ng-class="{red : Custom.length}">
    <label ng-bind='Custom'></label>
</body>

以类似的方式，我希望它适用于所有输入类型。

在电子邮件字段的情况下。当用户键入错误的电子邮件时，它不起作用，因为模型在无效时不会获得值。

在模型有效之前，角度不会将值绑定到模型，因此在输入类型的情况下，归档长度将为 0，直到您输入正确的电子邮件。但是您可以使用$viewValue值来做到这一点，请参阅下面的演示

.red {
  border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="">
  <form name="myform">
    <input type='text' ng-model='Custom' ng-class="{red : Custom.length}">
    <input type='email' ng-model='email' ng-class="{red : myform.email.$viewValue}" name="email">
    <label ng-bind='Custom'></label>
  </form>
</body>

发生这种情况是因为直到输入包含有效的电子邮件地址，ng-model 为空。

克服它的一种方法是像这样检查$viewValue变量：

<form name="myForm" novalidate>
    <input name="email" type='email' ng-model='email' 
           ng-class="{red : myForm.email.$viewValue.length}">
</form>
相关文章：