I have a html select option
我有一个html选择选项
<select>
<option ng-repeat="field in filter.fields" value="{{field.id}}">{{field.name}}</option>
</select>
which I am iterating from ng-repeat , I want to disable option on basis of a filed selectable like
我正在从ng-repeat中进行迭代,我想在一个可选择的文件基础上禁用选项
<select>
<option ng-repeat="field in filter.fields" {field.selectable==true?enable:disable} value="{{field.id}}">{{field.name}}</option>
</select>
How can I achieve this with angular?
我怎么用角来表示呢?
3 个解决方案
#1
27
Assuming you have a structure like this:
假设你有这样的结构:
$scope.filter = {
fields: [
{id: 1, name: "a", selectable: false},
{id: 2, name: "asdf", selectable: true},
{id: 3, name: "qwet", selectable: false},
{id: 4, name: "qnjew", selectable: true},
{id: 5, name: "asdjf", selectable: false}
]
};
This should work for you:
这应该对你有用:
<select>
<option ng-repeat="field in filter.fields" ng-disabled="field.selectable" value="{{field.id}}">{{field.name}}</option>
</select>
#2
11
While the ng-disabled attribute will technically work, you are likely to encounter bugs when using ng-repeat on options. This is a well known issue and is exactly the reason that the angular team created ng-options. There is not yet an angular implementation for using ng-options and ng-disabled together, but Alec LaLonde created this custom directive that you can add in and use. See the issue forum here: https://github.com/angular/angular.js/issues/638 and the jsfiddle from that post.
虽然禁用了ng的属性在技术上可以工作,但是在使用ng-repeat选项时,您可能会遇到错误。这是一个众所周知的问题,这正是角型团队创建ng选项的原因。目前还没有将ng选项和ng禁用一起使用的角度实现,但是Alec LaLonde创建了这个自定义指令,您可以添加和使用它。请参阅这里的问题论坛:https://github.com/angular/angular.js/issues es/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) { //1
var locals = {};
locals[attr] = data[i];
$(this).attr('disabled', fnDisableIfTrue($scope, locals));
});
};
return {
priority: 0,
require: 'ngModel',
link: function($scope, $element, attributes) { //2
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) { //3
var disabledOptions = $parse(attrToWatch)($scope);
if (!newValue) return;
disableOptions($scope, expElements[2], $element, disabledOptions, fnDisableIfTrue);
});
}
};
}
]);
//1 refresh the disabled options in the select element
//2 parse expression and build array of disabled options
//3 handle model updates properly
function OptionsController($scope) {
$scope.ports = [{name: 'http', isinuse: true},
{name: 'test', isinuse: false}];
$scope.selectedport = 'test';
}
#3
3
This is actually a fairly old question. In the later version of Angular (angular 1.4+) you have the ngOptions directive. Here is the link:-
这实际上是一个相当古老的问题。在后版本的角(角1.4+)你有ngOptions指令。这是链接:
https://docs.angularjs.org/api/ng/directive/ngOptions
https://docs.angularjs.org/api/ng/directive/ngOptions
There is now a syntax for handling this case:-
现在有一种处理这种情况的语法:-
label disable when disable for value in array track by trackexpr
I thought I would put this in in case someone else visits this page.
我想我应该把这个放在这里以防别人访问这个页面。
#1
27
Assuming you have a structure like this:
假设你有这样的结构:
$scope.filter = {
fields: [
{id: 1, name: "a", selectable: false},
{id: 2, name: "asdf", selectable: true},
{id: 3, name: "qwet", selectable: false},
{id: 4, name: "qnjew", selectable: true},
{id: 5, name: "asdjf", selectable: false}
]
};
This should work for you:
这应该对你有用:
<select>
<option ng-repeat="field in filter.fields" ng-disabled="field.selectable" value="{{field.id}}">{{field.name}}</option>
</select>
#2
11
While the ng-disabled attribute will technically work, you are likely to encounter bugs when using ng-repeat on options. This is a well known issue and is exactly the reason that the angular team created ng-options. There is not yet an angular implementation for using ng-options and ng-disabled together, but Alec LaLonde created this custom directive that you can add in and use. See the issue forum here: https://github.com/angular/angular.js/issues/638 and the jsfiddle from that post.
虽然禁用了ng的属性在技术上可以工作,但是在使用ng-repeat选项时,您可能会遇到错误。这是一个众所周知的问题,这正是角型团队创建ng选项的原因。目前还没有将ng选项和ng禁用一起使用的角度实现,但是Alec LaLonde创建了这个自定义指令,您可以添加和使用它。请参阅这里的问题论坛:https://github.com/angular/angular.js/issues es/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) { //1
var locals = {};
locals[attr] = data[i];
$(this).attr('disabled', fnDisableIfTrue($scope, locals));
});
};
return {
priority: 0,
require: 'ngModel',
link: function($scope, $element, attributes) { //2
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) { //3
var disabledOptions = $parse(attrToWatch)($scope);
if (!newValue) return;
disableOptions($scope, expElements[2], $element, disabledOptions, fnDisableIfTrue);
});
}
};
}
]);
//1 refresh the disabled options in the select element
//2 parse expression and build array of disabled options
//3 handle model updates properly
function OptionsController($scope) {
$scope.ports = [{name: 'http', isinuse: true},
{name: 'test', isinuse: false}];
$scope.selectedport = 'test';
}
#3
3
This is actually a fairly old question. In the later version of Angular (angular 1.4+) you have the ngOptions directive. Here is the link:-
这实际上是一个相当古老的问题。在后版本的角(角1.4+)你有ngOptions指令。这是链接:
https://docs.angularjs.org/api/ng/directive/ngOptions
https://docs.angularjs.org/api/ng/directive/ngOptions
There is now a syntax for handling this case:-
现在有一种处理这种情况的语法:-
label disable when disable for value in array track by trackexpr
I thought I would put this in in case someone else visits this page.
我想我应该把这个放在这里以防别人访问这个页面。