虽然ng-disabled属性从技术上讲可以使用,但在选项上使用ng-repeat时可能会遇到错误。这是一个众所周知的问题,也正是Angular团队创建ng-options的原因。目前还没有使用ng-options和ng-disabled的Angular实现,但Alec LaLonde创建了这个自定义指令,您可以添加并使用它。请查看此处的问题论坛:https://github.com/angular/angular.js/issues/638以及该帖子的jsfiddle。
angular.module('myApp', [])
.directive('optionsDisabled', [ '$parse', function($parse) {
var disableOptions = function($scope, attr, $element, data, fnDisableIfTrue) {
$element.find('option:not([value="?"])').each(function(i, e) {
var locals = {};
locals[attr] = data[i];
$(this).attr('disabled', fnDisableIfTrue($scope, locals));
});
};
return {
priority: 0,
require: 'ngModel',
link: function($scope, $element, attributes) {
var expElements = attributes.optionsDisabled.match(/^\s*(.+)\s+for\s+(.+)\s+in\s+(.+)?\s*/),
attrToWatch = expElements[3],
fnDisableIfTrue = $parse(expElements[1]);
$scope.$watch(attrToWatch, function(newValue, oldValue) {
if (!newValue) return;
disableOptions($scope, expElements[2], $element, newValue, fnDisableIfTrue);
}, true);
$scope.$watch(attributes.ngModel, function(newValue, oldValue) {
var disabledOptions = $parse(attrToWatch)($scope);
if (!newValue) return;
disableOptions($scope, expElements[2], $element, disabledOptions, fnDisableIfTrue);
});
}
};
}
]);
function OptionsController($scope) {
$scope.ports = [{name: 'http', isinuse: true},
{name: 'test', isinuse: false}];
$scope.selectedport = 'test';
}
select
输入框的值与模型绑定? - bibs<option>
元素的方式是不同的。 - Amy Pellegrini