8000 feat(select): Adding md-selected-text attribute to md-select. · code-tree/material@bbbe9e3 · GitHub
[go: up one dir, main page]
Skip to content

Commit bbbe9e3

Browse files
Derek LouieThomasBurleson
Derek Louie
authored and
ThomasBurleson
committed
feat(select): Adding md-selected-text attribute to md-select.
Closes angular#7721
1 parent 2776ad2 commit bbbe9e3

File tree

4 files changed

+60
-6
lines changed

4 files changed

+60
-6
lines changed

‎src/components/select/demoSelectedText/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div ng-controller="SelectedTextController" class="md-padding" ng-cloak>
2+
<div>
3+
<h1 class="md-title">Pick an item below</h1>
4+
<div layout="row">
5+
<md-input-container>
6+
<label>Items</label>
7+
<md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
8+
<md-optgroup label="items">
9+
<md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
10+
</md-optgroup>
11+
</md-select>
12+
</md-input-container>
13+
</div>
14+
</div>
15+
</div>

‎src/components/select/demoSelectedText/script.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
angular
2+
.module('selectDemoSelectedText', ['ngMaterial'])
3+
.controller('SelectedTextController', function($scope) {
4+
$scope.items = [1, 2, 3, 4, 5, 6, 7];
5+
$scope.selectedItem;
6+
$scope.getSelectedText = function() {
7+
if ($scope.selectedItem !== undefined) {
8+
return "You have selected: Item " + $scope.selectedItem;
9+
} else {
10+
return "Please select an item";
11+
}
12+
};
13+
});

‎src/components/select/select.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ angular.module('material.components.select', [
3838
* @param {expression=} md-on-close Expression to be evaluated when the select is closed.
3939
* @param {expression=} md-on-open Expression to be evaluated when opening the select.
4040
* Will hide the select options and show a spinner until the evaluated promise resolves.
41+
* @param {expression=} md-selected-text Expression to be evaluated that will return a string
42+
* to be displayed as a placeholder in the select input box when it is closed.
4143
* @param {string=} placeholder Placeholder hint text.
4244
* @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
4345
* explicit label is present.
@@ -257,9 +259,16 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
257259

258260
mdSelectCtrl.setLabelText = function(text) {
259261
mdSelectCtrl.setIsPlaceholder(!text);
260-
// Use placeholder attribute, otherwise fallback to the md-input-container label
261-
var tmpPlaceholder = attr.placeholder || (containerCtrl && containerCtrl.label ? containerCtrl.label.text() : '');
262-
text = text || tmpPlaceholder || '';
262+
263+
if (attr.mdSelectedText) {
264+
text = $parse(attr.mdSelectedText)(scope);
265+
} else {
266+
// Use placeholder attribute, otherwise fallback to the md-input-container label
267+
var tmpPlaceholder = attr.placeholder ||
268+
(containerCtrl && containerCtrl.label ? containerCtrl.label.text() : '');
269+
text = text || tmpPlaceholder || '';
270+
}
271+
263272
var target = valueEl.children().eq(0);
264273
target.html(text);
265274
};
@@ -1478,4 +1487,3 @@ function SelectProvider($$interimElementProvider) {
14781487
return isScrollable;
14791488
}
14801489
}
1481-

‎src/components/select/select.spec.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ describe('<md-select>', function() {
7777

7878
it('sets aria-owns between the select and the container', function() {
7979
var select = setupSelect('ng-model="val"').find('md-select');
80-
var ownsId = select.attr('aria-owns');
80+
var ownsId = select.attr('aria-owns');
8181
expect(ownsId).toBeTruthy();
8282
var containerId = select[0].querySelector('._md-select-menu-container').getAttribute('id');
8383
expect(ownsId).toBe(containerId);
@@ -132,7 +132,7 @@ describe('<md-select>', function() {
132132
var opts = [ { id: 1, name: 'Bob' }, { id: 2, name: 'Alice' } ];
133133
var select = setupSelect('ng-model="$root.val" ng-change="onChange()" ng-model-options="{trackBy: \'$value.id\'}"', opts);
134134
expect(changed).toBe(false);
135-
135+
136136
openSelect(select);
137137
clickOption(select, 1);
138138
waitForSelectClose();
@@ -258,6 +258,24 @@ describe('<md-select>', function() {
258258
}
259259
}));
260260

261+
it('displays md-selected-text when specified', inject(function($rootScope) {
262+
$rootScope.selectedText = 'Hello World';
263+
264+
var select = setupSelect('ng-model="someVal", md-selected-text="selectedText"', null, true).find('md-select');
265+
var label = select.find('md-select-value');
266+
267+
expect(label.text()).toBe($rootScope.selectedText);
268+
269+
$rootScope.selectedText = 'Goodbye world';
270+
271+
// The label update function is not called until some user action occurs.
272+
openSelect(select);
273+
closeSelect(select);
274+
waitForSelectClose();
275+
276+
expect(label.text()).toBe($rootScope.selectedText);
277+
}));
278+
261279
it('supports rendering multiple', inject(function($rootScope, $compile) {
262280
$rootScope.val = [1, 3];
263281
var select = $compile('<md-input-container>' +

0 commit comments

Comments
 (0)
0