javascript - 验证 AngularJS 中的下拉菜单

Question

我有以下代码，仅当控件移离给定的 select 元素时才验证，即 select 元素的边框仅显示红色或绿色当给定的 select 被移开或鼠标光标移离给定的 select 元素

<select class="form-control input-xsmall select-inline" ng-class="{'invalid': form.year.$dirty && currentYear=='Year', 'valid': form.year.$dirty && currentYear != 'Year'}" data-ng-model="currentYear" name="year">
    <option>Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

当他/她实际上正在设置 option 元素的值但已经做出了选择时，我可以做什么来根据选择框的有效性向用户显示绿色或红色边框选择元素 $dirty 或 !$pristine。

有人可以帮我吗？

Answer 1

您可以使用ng-blur将您自己的“touched”属性添加到year，然后使用该“touched”属性添加正确的类

<select class="form-control input-xsmall select-inline" 
  ng-class="{'invalid': form.year.isTouched && currentYear=='Year', 'valid': form.year.isTouched && currentYear != 'Year'}" 
  ng-blur="form.year.isTouched = true"
  data-ng-model="currentYear" 
  name="year">
    <option>Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

查看这个样本:http://plnkr.co/edit/Wpz27yBw8OXSaYfpkP3z?p=preview