Angular Material 自动完成浮动标签与演示不同

Question

感谢您的关注。

我正在尝试重新创建 Angular Material 演示以使用浮动标签自动完成。

此处显示：https://material.angularjs.org/#/demo/material.components.autocomplete

我的自动完成字段没有像输入容器那样设置样式，我查看了 md-floating-label 的文档，但找不到任何可以指导我的东西。

当前问题的CodePen：http://codepen.io/ChrisHuie/pen/XbrZbd?editors=101

<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
</head>

<body>
  <div ng-app="autocompleteFloatingLabelDemo" ng-controller="DemoCtrl as ctrl" layout="column">
  <md-content layout-padding layout="column">
    <form ng-submit="$event.preventDefault()">
      <div layout-gt-sm="row">
        <md-input-container flex>
          <label>Name</label>
          <input type="text"/>
        </md-input-container>
          <md-autocomplete flex
              md-no-cache="ctrl.noCache"
              md-selected-item="ctrl.selectedItem"
              md-search-text="ctrl.searchText"
              md-items="item in ctrl.querySearch(ctrl.searchText)"
              md-item-text="item.display"
              md-floating-label="Favorite state">
            <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
          </md-autocomplete>  
      </div>
    </form>
  </md-content>
  </div>
    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<body>

(function () {
  'use strict';
  angular
      .module('autocompleteFloatingLabelDemo', ['ngMaterial'])
        .config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
            .primaryPalette('green')
            .accentPalette('orange');
})
     .controller('DemoCtrl', DemoCtrl);
  function DemoCtrl ($timeout, $q) {
    var self = this;
    // list of `state` value/display objects
    self.states        = loadAll();
    self.selectedItem  = null;
    self.searchText    = null;
    self.querySearch   = querySearch;
    // ******************************
    // Internal methods
    // ******************************
    /**
     * Search for states... use $timeout to simulate
     * remote dataservice call.
     */
    function querySearch (query) {
      var results = query ? self.states.filter( createFilterFor(query) ) : [];
      return results;
    }
    /**
     * Build `states` list of key/value pairs
     */
    function loadAll() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';
      return allStates.split(/, +/g).map( function (state) {
        return {
          value: state.toLowerCase(),
          display: state
        };
      });
    }
    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);
      };
    }
  }
})();

我是一名新程序员，整个早上都在这上面度过，非常感谢任何指导

Answer 1

这与cdn版本有关，因为当我去rawgit链接我的CSS和Javascript时，它解决了这个问题。所以这个问题必须在最近的更新中得到解决。

已更新 CodePen：http://codepen.io/ChrisHuie/pen/XbrZbd?editors=101

<head>
    <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
</head>

.......

<!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>

Angular Material 自动完成浮动标签与演示不同

Angular Material Autocomplete Floating Label Different Then Demo

angularjs

autocomplete

angular-material