Question

在我的一个应用程序中，我要求在具有任何数据时添加特定类，而不管它使用AngularJS的输入类型（电子邮件，文本）：

在this插件中，只需在文本框中输入任何内容即可更改边框颜色。

参考代码

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

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

如果是电子邮件字段。当用户输入错误的电子邮件时，它不起作用，因为模型在无效时不会获得值。

Answer 1

在模型有效之前，Angular没有绑定到模型的值，因此在输入类型的情况下，字段长度将为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>

Answer 2

这是因为在输入包含有效的电子邮件地址之前，ng-model为空。

克服它的一种方法是检查$ viewValue变量，如下所示：

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

根据angular js app中的条件动态添加类

2 个答案: