我正在使用AngularJS材料设计库,我正在寻找带有自动填充的浮动标签的输入框,以及用于表示用户选择的选项的芯片。我得到的最好的是:
https://codepen.io/anon/pen/eeqBKK
HTML:
<div ng-controller="CustomInputDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoCustomInputs" ng-app="MyApp">
<md-content class="md-padding" layout="column">
<md-chips ng-model="ctrl.selectedVegetables" md-autocomplete-snap="" md-transform-chip="ctrl.transformChip($chip)" md-require-match="ctrl.autocompleteDemoRequireMatch">
<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" placeholder="Choose your favourite colors">
<span md-highlight-text="ctrl.searchText">{{item.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
<em>({{$chip.type}})</em>
</span>
</md-chip-template>
</md-chips>
</md-content>
</div>
JavaScript的:
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('CustomInputDemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q) {
var self = this;
self.readonly = false;
self.selectedItem = null;
self.searchText = null;
self.querySearch = querySearch;
self.colors = loadColors();
self.selectedColors = [];
self.numberChips = [];
self.numberChips2 = [];
self.numberBuffer = '';
self.autocompleteDemoRequireMatch = true;
self.transformChip = transformChip;
function transformChip(chip) {
if (angular.isObject(chip)) {
return chip;
}
return { name: chip, type: 'new' }
}
function querySearch (query) {
var results = query ? self.colors.filter(createFilterFor(query)) : [];
return results;
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(colors) {
return (colors._lowername.indexOf(lowercaseQuery) === 0) ||
(colors._lowertype.indexOf(lowercaseQuery) === 0);
};
}
function loadColors() {
var colorOptions = [{'name': 'Red','type': 'Color'},{'name': 'Orange','type': 'Color'},{'name': 'Yellow','type': 'Color'},{'name': 'Green','type': 'Color'},{'name': 'Blue','type': 'Color'},{'name': 'Purple','type': 'Color'}
];
return colorOptions.map(function(col) {
col._lowername = col.name.toLowerCase();
col._lowertype = col.type.toLowerCase();
return col;
});
}
}
})();
其中,输入框,自动完成,芯片表示选项,但不文本区域上的浮动标签。是否可以在此设置中使用浮动标签?