验证AngularJS中的下拉菜单答案

【问题标题】：Validating dropdown menu in AngularJS验证AngularJS中的下拉菜单
【发布时间】：2014-10-16 04:57:15
【问题描述】：

我有以下代码，仅当控件离开给定的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。

有人可以帮我吗？

【问题讨论】：

您使用的是 AngularJs 1.3.x 还是 1.2.x？
@JoseM: AngularJS 1.2.21
在 1.3 中有一个 $touched 属性可供您使用，但在 1.2 中默认情况下没有类似的东西，尽管您可以制作自己的指令

标签： javascript html angularjs validation select

【解决方案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>

查看此示例 plunker：http://plnkr.co/edit/Wpz27yBw8OXSaYfpkP3z?p=preview

【讨论】：