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>

角度材料自动完成浮动标签不同然后演示

1 个答案: