Question

我正在尝试使用md-autocomplete，其中选项具有可变大小。我不确定组件是如何计算高度的，但是似乎不太一致。我举了一个简短的例子来说明我要说的话： https://codepen.io/anon/pen/zmQWWq

如果您没有输入任何内容，只需单击输入，即组件会很好地显示前三个选项和一个滚动条。
如果键入al（单击鼠标左键然后单击后退），则该组件将仅显示第一个选项，而不会完全显示它。
如果键入r（先单击鼠标然后单击后退），则高度会更小。

我发现了该组件过去的一些问题，但似乎已解决。我不确定是否相关：https://github.com/angular/material/issues/6668

这是在代码笔中可以看到的部分代码：

// ----- HTML ----

<div ng-controller="AppCtrl as ctrl" ng-cloak="" class="carddemoBasicUsage" ng-app="MyApp">
    <div layout="column">
        <md-toolbar>
            <div class="md-toolbar-tools">

                <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache=false md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)"
                    md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-min-length="0" placeholder="type something" md-menu-class="autocomplete-custom-template">
                    <md-item-template>

                        <span>({{item.name}}) {{item.code}}</span>

                    </md-item-template>
                </md-autocomplete>
            </div>
        </md-toolbar>
    </div>
</div>

// -------- CSS ----------

 md-autocomplete {
      flex: 0 1 300px;
    }

.autocomplete-custom-template li {
  border-bottom: 1px solid #ccc;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal;
  line-height: 1.8;
}
.autocomplete-custom-template li:last-child {
  border-bottom-width: 0;
}

.autocomplete-custom-template .vm-test {
  display:flex;
  flex-direction: column;
}

// ------- JS -----

angular
    .module('MyApp', ['ngMaterial'])
    .controller('AppCtrl', AppController)

function AppController($scope) {
    var ctrl = this;
    ctrl.$scope = $scope;

    var ctrl = this;
    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;

    self.repos = loadAll();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;


    function querySearch(query) {
        var results = query ? self.repos.filter(createFilterFor(query)) : self.repos,
            deferred;
        if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function() {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }



    function loadAll() {
        var repos = [{
                "name": "Debating me breeding be answered an he. Spoil event was words her off cause any.",
                "code": null
            },
            {
                "name": "mamamamma Reference - 2 - 222",
                "code": null
            },
            {
                "name": "mamamamma Refe 222",
                "code": null
            },
            {
                "name": "fds111 name name fds111 name name fds111 name name fds111 name name fds111 name ",
                "code": null
            },
            {
                "name": "alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto",
                "code": "21-03-23-12-312-123-NOT-THAT-BIG"
            },
            {
                "name": "alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto alberto",
                "code": "21-03-23-12-3333222212-123-NOT-THAT-BIG HA HA HA"
            },
            {
                "name": "r1 lslslslslls lslslslsl r1 lslslslslls lslslslsl r1 lslslslslls lslslslsl r1 lslslslslls lslslslsl r1 lslslslslls lslslslsl r1 lslslslslls lslslslsl r1 lslslslslls lslslslslr1 lslslslslls lslslslslv",
                "code": "ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO ALBERTO"
            },
            {
                "name": "sikola",
                "code": "FEJ"
            }
        ];

        return repos.map(function(repo) {
            repo.value = repo.name.toLowerCase();
            return repo;
        });
    }

    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(item) {
            return (item.value.indexOf(lowercaseQuery) === 0);
        };
    }
};

AppController.prototype.func = function() {};

AppController.$inject = ['$scope'];

任何有关如何使其始终显示出多个元素的见解，或者仅受最大高度限制的见识，将不胜感激。

具有自定义模板的高度可变的材料md-autocomplete

0 个答案: