Javascript ng更改在选择框中检测ng模型是否为空或无效，并选择第一个有效选项

我有数百个这样的案例（因此修复必须是全局性的，而不仅仅限于此特定示例）

有很多这样的选择框：

<select ng-model="selectedItem">
 <option ng-repeat="item in items | filter:attributes" value="{{item.id}}">{{item.name}}</option>
</select>

{{item.name}

selectedItem

变量为null（并且它将始终初始化为null，在这种特殊情况下控制器中无法更改）

---

我想找出的是一种全局查看视图中所有

元素的方法，查看该

框的

ng model

变量是否为

null

，如果为

null

则将其设置为该选择框中的第一个有效选项，任何时候范围发生变化时，都需要检查ng模型是否为空，并自动选择第一个有效选项。

实现这一点的关键是，您可以使用相同的名称定义多个角度指令，并且所有这些指令都将针对匹配的元素运行

这是非常强大的，因为它使您能够扩展内置指令或第三方指令等的功能

使用此命令，我能够创建一个

select

指令，每当模型值为null时，该指令将选择列表中的第一个有效选项

但是，它没有做的一件事是，如果您从列表中删除所选项目（它会返回为空白），则应对。但希望这足以让你开始

var-app=angular.module（'stackoverflow'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.selectedItem=null；
$scope.items=[1,2,3,4].map（函数（id）{
返回{
id:id，
可见：对，
文本：“项目”+id
};
});
});
app.directive（'select'，function（）{
返回{
限制：'E'，
要求：“？ngModel”，
链接：函数（$scope、$elem、$attrs、ngModel）{
//不为没有ng模型属性的选择执行任何操作
如果（！ngModel）返回；
//还允许指定一个特殊的“无默认”属性来选择退出此行为
if（$attrs.hasOwnProperty（'noDefault'））返回；
//观察模型值是否为null
var deregWatch=$scope.$watch（函数（）{
返回ngModel.$modelValue；
}，函数（模型值）{
如果（modelValue==null）{
//延迟以允许正确插值表达式
setTimeout（函数（）{
//查找具有有效文本的第一个选项
var$options=$elem.find（'option'），
$firstValidOption，optionText；
对于（变量i=0，len=$options.length；i

{{item.text}
可见项目：



{{item.text}