自动完成和筹码上的AngularJS材质浮动标签

时间:2017-12-09 01:05:56

标签: javascript html angularjs

我正在使用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;
      });
    }
  }
})();

其中,输入框,自动完成,芯片表示选项,但文本区域上的浮动标签。是否可以在此设置中使用浮动标签?

0 个答案:

没有答案