feat(select): Adding md-selected-text attribute to md-select.

Closes #7721

src/components/select/demoSelectedText/index.html

@@ -0,0 +1,15 @@
+<div ng-controller="SelectedTextController" class="md-padding" ng-cloak>
+ <div>
+ <h1 class="md-title">Pick an item below</h1>
+ <div layout="row">
+ <md-input-container>
+ <label>Items</label>
+ <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
+ <md-optgroup label="items">
+ <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
+ </md-optgroup>
+ </md-select>
+ </md-input-container>
+ </div>
+ </div>
+</div>

src/components/select/demoSelectedText/script.js

@@ -0,0 +1,13 @@
+angular
+ .module('selectDemoSelectedText', ['ngMaterial'])
+ .controller('SelectedTextController', function($scope) {
+ $scope.items = [1, 2, 3, 4, 5, 6, 7];
+ $scope.selectedItem;
+ $scope.getSelectedText = function() {
+ if ($scope.selectedItem !== undefined) {
+ return "You have selected: Item " + $scope.selectedItem;
+ } else {
+ return "Please select an item";
+ }
+ };
+ });

src/components/select/select.js

@@ -38,6 +38,8 @@ angular.module('material.components.select', [
  * @param {expression=} md-on-close Expression to be evaluated when the select is closed.
  * @param {expression=} md-on-open Expression to be evaluated when opening the select.
  * Will hide the select options and show a spinner until the evaluated promise resolves.
+ * @param {expression=} md-selected-text Expression to be evaluated that will return a string
+ * to be displayed as a placeholder in the select input box when it is closed.
  * @param {string=} placeholder Placeholder hint text.
  * @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
  * explicit label is present.
@@ -257,9 +259,16 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
 
  mdSelectCtrl.setLabelText = function(text) {
  mdSelectCtrl.setIsPlaceholder(!text);
- // Use placeholder attribute, otherwise fallback to the md-input-container label
- var tmpPlaceholder = attr.placeholder || (containerCtrl && containerCtrl.label ? containerCtrl.label.text() : '');
- text = text || tmpPlaceholder || '';
+
+ if (attr.mdSelectedText) {
+ text = $parse(attr.mdSelectedText)(scope);
+ } else {
+ // Use placeholder attribute, otherwise fallback to the md-input-container label
+ var tmpPlaceholder = attr.placeholder ||
+ (containerCtrl && containerCtrl.label ? containerCtrl.label.text() : '');
+ text = text || tmpPlaceholder || '';
+ }
+
  var target = valueEl.children().eq(0);
  target.html(text);
  };
@@ -1480,4 +1489,3 @@ function SelectProvider($$interimElementProvider) {
  return isScrollable;
  }
 }
-

src/components/select/select.spec.js

@@ -82,7 +82,7 @@ describe('<md-select>', function() {
 
  it('sets aria-owns between the select and the container', function() {
  var select = setupSelect('ng-model="val"').find('md-select');
- var ownsId = select.attr('aria-owns'); 
+ var ownsId = select.attr('aria-owns');
  expect(ownsId).toBeTruthy();
  var containerId = select[0].querySelector('.md-select-menu-container').getAttribute('id');
  expect(ownsId).toBe(containerId);
@@ -137,7 +137,7 @@ describe('<md-select>', function() {
  var opts = [ { id: 1, name: 'Bob' }, { id: 2, name: 'Alice' } ];
  var select = setupSelect('ng-model="$root.val" ng-change="onChange()" ng-model-options="{trackBy: \'$value.id\'}"', opts);
  expect(changed).toBe(false);
- 
+
  openSelect(select);
  clickOption(select, 1);
  waitForSelectClose();
@@ -284,6 +284,24 @@ describe('<md-select>', function() {
  }
  }));
 
+ it('displays md-selected-text when specified', inject(function($rootScope) {
+ $rootScope.selectedText = 'Hello World';
+
+ var select = setupSelect('ng-model="someVal", md-selected-text="selectedText"', null, true).find('md-select');
+ var label = select.find('md-select-value');
+
+ expect(label.text()).toBe($rootScope.selectedText);
+
+ $rootScope.selectedText = 'Goodbye world';
+
+ // The label update function is not called until some user action occurs.
+ openSelect(select);
+ closeSelect(select);
+ waitForSelectClose();
+
+ expect(label.text()).toBe($rootScope.selectedText);
+ }));
+
  it('supports rendering multiple', inject(function($rootScope, $compile) {
  $rootScope.val = [1, 3];
  var select = $compile('<md-input-container>' +