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

Closes #7721

Author: Derek Louie

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>' +