我有成百上千个这样的案例(因此,修复程序必须是全局的,而不仅限于此特定示例)
有很多这样的选择框:
<select ng-model="selectedItem">
<option ng-repeat="item in items | filter:attributes" value="{{item.id}}">{{item.name}}</option>
</select>
selectedItem
变量为null(并且始终将其初始化为null,在这种特殊情况下不能在控制器中对其进行更改)。我试图找出的是一种在视图中全局监视所有
<select>
元素的方法,查看该ng-model
框的<select>
变量是否为null
,如果为null
则将其设置为该选择框中的第一个有效选项,每当范围更改时,都需要检查ng-model是否为null
并自动选择第一个有效选项。 最佳答案
要实现这一点的关键是,您可以定义多个具有相同名称的Angular指令,并且所有这些指令都将针对匹配的元素运行。
这非常强大,因为它使您能够扩展内置指令或第三方指令等的功能。
使用此方法,我能够创建一个select
指令,只要模型值为null,它就会在列表中选择第一个有效选项。
但是,如果您从列表中删除选定的项目(它返回为空白),它不会做的一件事就是应付。但希望这足以让您入门。
var app = angular.module('stackoverflow', []);
app.controller('MainCtrl', function($scope) {
$scope.selectedItem = null;
$scope.items = [1, 2, 3, 4].map(function(id) {
return {
id: id,
visible: true,
text: 'Item ' + id
};
});
});
app.directive('select', function() {
return {
restrict: 'E',
require: '?ngModel',
link: function($scope, $elem, $attrs, ngModel) {
// don't do anything for selects without ng-model attribute
if (!ngModel) return;
// also allow specifying a special "no-default" attribute to opt out of this behaviour
if ($attrs.hasOwnProperty('noDefault')) return;
// watch the model value for null
var deregWatch = $scope.$watch(function() {
return ngModel.$modelValue;
}, function(modelValue) {
if (modelValue === null) {
// delay to allow the expressions to be interpolated correctly
setTimeout(function() {
// find the first option with valid text
var $options = $elem.find('option'),
$firstValidOption, optionText;
for (var i = 0, len = $options.length; i < len; i++) {
optionText = $options.eq(i).text();
if (optionText !== '' && !optionText.match(/^(\?|{)/)) {
$firstValidOption = $options.eq(i);
break;
}
}
if ($firstValidOption) {
$firstValidOption.prop('selected', true);
ngModel.$setViewValue($firstValidOption.attr('value'));
// trigger a digest so Angular sees the change
$scope.$evalAsync();
}
}, 0);
}
});
// clean up in destroy method to prevent any memory leaks
var deregDestroy = $scope.$on('$destroy', function() {
deregWatch();
deregDestroy();
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="stackoverflow">
<div ng-controller="MainCtrl">
<select ng-model="selectedItem">
<option ng-repeat="item in items | filter:{visible:true} track by item.id" value="{{item.id}}">{{item.text}}</option>
</select>
<p>Visible items:</p>
<ul>
<li ng-repeat="item in items track by item.id">
<label>
<input type="checkbox" ng-model="item.visible">{{item.text}}
</label>
</li>
</ul>
</div>
</div>
关于javascript - ng-change在选择框中检测ng-model是否为null或无效,然后选择第一个有效选项,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34935941/