Question

如果有一个登录页面，我想将textinputs的边框颜色更改为红色（如果该字段为空）。到目前为止，我只完成了在textinput下方显示文本但未更改边框颜色。我该怎么办呢？我目前正在使用angularjs和ionic1。

这是我的HTML代码：

  <label class="item item-input" style="background-color: #000000; background: linear-gradient(to bottom, #2B292A, #000000); border-color: #494949;" id="login-input3">
     <img src="img/finalimages/username.png" style="width: 20px; margin-right: 10px;">
     <input type="text" name="userName" placeholder="用户名不允许出现符号" style="color: #ffffff;" ng-model="username" ng-required="true">
  </label>
  <p ng-show="login_form3.userName.$invalid && !login_form3.userName.$pristine" class="help-block">Your name is required.</p>

Answer 1

首先，设置一个样式类，如：

.redBorder{border: 1px solid red;}

然后将ng-class添加到input，例如：

ng-class="{'redBorder':login_form3.userName.$invalid && !login_form3.userName.$pristine}"

当符合相同条件且显示文字“您的名字是必需的”时，这会将样式更改为redBorder

如果textinput为空angularjs，则更改边框颜色

1 个答案: