【发布时间】：2015-04-19 18:04:03
【问题描述】：
感谢您查看此内容。
我正在尝试重新创建 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);
};
}
}
})();
我是一名新程序员，花了一上午的时间在这上面，所以非常感谢任何指导
【问题讨论】：
标签： angularjs autocomplete angular-material