kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-07 08:57:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): ensure that at least one option has the selected attribute set

Browse Source 
Using `prop` to set selected is correct programmatically but accessibility
guidelines suggest that at least on item should have the `selected` attribute
set.

Closes #8366
Closes #8429

Conflicts:
	test/ng/directive/selectSpec.js
This commit is contained in:
Peter Bacon Darwin
2014-07-31 09:31:14 +01:00
parent bcfa64e77c
commit 79538afd7b
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/ng/directive/select.js
View File

@@ -566,6 +566,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {
(element = optionTemplate.clone())
.val(option.id)
.prop('selected', option.selected)
.attr('selected', option.selected)
.text(option.label);
}

41
test/ng/directive/selectSpec.js
View File

@@ -994,6 +994,47 @@ describe('select', function() {
expect(element.find('option').eq(0).prop('selected')).toBeTruthy();
expect(element.find('option').length).toEqual(2);
});
it('should ensure that at least one option element has the "selected" attribute', function() {
createSelect({
'ng-model': 'selected',
'ng-options': 'item.id as item.name for item in values'
});
scope.$apply(function() {
scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
});
expect(element.val()).toEqual('?');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
scope.$apply(function() {
scope.selected = 10;
});
// Here the ? option should disappear and the first real option should have selected attribute
expect(element.val()).toEqual('0');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
// Here the selected value is changed but we don't change the selected attribute
scope.$apply(function() {
scope.selected = 20;
});
expect(element.val()).toEqual('1');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
scope.$apply(function() {
scope.values.push({id: 30, name: 'C'});
});
expect(element.val()).toEqual('1');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
// Here the ? option should reappear and have selected attribute
scope.$apply(function() {
scope.selected = undefined;
});
expect(element.val()).toEqual('?');
expect(element.find('option').eq(0).attr('selected')).toEqual('selected');
});
});