Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion src/components/select/select.js
Original file line number Diff line number Diff line change
Expand Up @@ -1170,6 +1170,12 @@ function SelectMenuDirective($parse, $mdUtil, $mdConstant, $mdTheming) {
* @param {string=} value Attribute to set the value of the option.
* @param {expression=} ng-repeat <a ng-href="https://docs.angularjs.org/api/ng/directive/ngRepeat">
* AngularJS directive</a> that instantiates a template once per item from a collection.
* @param {expression=} ng-selected <a ng-href="https://docs.angularjs.org/api/ng/directive/ngSelected">
* AngularJS directive</a> that adds the `selected` attribute to the option when the expression
* evaluates as truthy.
*
* **Note:** Unlike native `option` elements used with AngularJS, `md-option` elements
* watch their `selected` attributes for changes and trigger model value changes on `md-select`.
* @param {boolean=} md-option-empty If the attribute exists, mark the option as "empty" allowing
* the option to clear the select and put it back in it's default state. You may supply this
* attribute on any option you wish, however, it is automatically applied to an option whose `value`
Expand Down Expand Up @@ -1258,14 +1264,30 @@ function OptionDirective($mdButtonInkRipple, $mdUtil, $mdTheming) {
}
});

scope.$$postDigest(function() {
attrs.$observe('selected', function(selected) {
if (!angular.isDefined(selected)) return;
if (typeof selected == 'string') selected = true;
if (selected) {
if (!selectMenuCtrl.isMultiple) {
selectMenuCtrl.deselect(Object.keys(selectMenuCtrl.selected)[0]);
}
selectMenuCtrl.select(optionCtrl.hashKey, optionCtrl.value);
} else {
selectMenuCtrl.deselect(optionCtrl.hashKey);
}
selectMenuCtrl.refreshViewValue();
});
});

$mdButtonInkRipple.attach(scope, element);
configureAria();

/**
* @param {*} newValue the option's new value
* @param {*=} oldValue the option's previous value
* @param {boolean=} prevAttempt true if this had to be attempted again due to an undefined
* hashGetter on the selectCtrl, undefined otherwise.
* hashGetter on the selectMenuCtrl, undefined otherwise.
*/
function setOptionValue(newValue, oldValue, prevAttempt) {
if (!selectMenuCtrl.hashGetter) {
Expand Down
27 changes: 22 additions & 5 deletions src/components/select/select.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -738,6 +738,15 @@ describe('<md-select>', function() {
expect(selectedOptions(el).length).toBe(0);
});

it('supports ng-selected on md-options', function() {
var el = setupSelect('ng-model="$root.model"', ['a','b','c'], false, $rootScope, null,
'$index === 2');

expect(selectedOptions(el).length).toBe(1);
expect(el.find('md-option').eq(2).attr('selected')).toBe('selected');
expect($rootScope.model).toBe('c');
});

it('supports circular references', function() {
var opts = [{ id: 1 }, { id: 2 }];
opts[0].refs = opts[1];
Expand Down Expand Up @@ -1688,13 +1697,13 @@ describe('<md-select>', function() {
});
}

function setupSelect(attrs, options, skipLabel, scope, optCompileOpts) {
function setupSelect(attrs, options, skipLabel, scope, optCompileOpts, ngSelectedExpression) {
var el;
var template = '' +
'<md-input-container>' +
(skipLabel ? '' : '<label>Label</label>') +
'<md-select ' + (attrs || '') + '>' +
optTemplate(options, optCompileOpts) +
optTemplate(options, optCompileOpts, ngSelectedExpression) +
'</md-select>' +
'</md-input-container>';

Expand All @@ -1713,13 +1722,21 @@ describe('<md-select>', function() {
return toReturn;
}

function optTemplate(options, compileOpts) {
/**
* @param {any[]=} options Array of option values to create md-options from
* @param {object=} compileOpts
* @param {object=} ngSelectedExpression If defined, sets the expression used by ng-selected.
* @return {string} template containing the generated md-options
*/
function optTemplate(options, compileOpts, ngSelectedExpression) {
var optionsTpl = '';
var ngSelectedTemplate = ngSelectedExpression ? ' ng-selected="' + ngSelectedExpression + '"' : '';

if (angular.isArray(options)) {
$rootScope.$$values = options;
var renderValueAs = compileOpts ? compileOpts.renderValueAs || 'value' : 'value';
optionsTpl = '<md-option ng-repeat="value in $$values" ng-value="value"><div class="md-text">{{' + renderValueAs + '}}</div></md-option>';
optionsTpl = '<md-option ng-repeat="value in $$values" ng-value="value"' + ngSelectedTemplate + '>' +
'<div class="md-text">{{' + renderValueAs + '}}</div></md-option>';
} else if (angular.isString(options)) {
optionsTpl = options;
}
Expand All @@ -1739,7 +1756,7 @@ describe('<md-select>', function() {
}

function openSelect(el) {
if (el[0].nodeName != 'MD-SELECT') {
if (el[0].nodeName !== 'MD-SELECT') {
el = el.find('md-select');
}
try {
Expand Down