материалы md-autocomplete с пользовательским шаблоном с переменной высотой - PullRequest
Новая
       15

материалы md-autocomplete с пользовательским шаблоном с переменной высотой

0 голосов
/ 30 октября 2018

Я пытаюсь использовать md-autocomplete, в котором параметры имеют переменные размеры. Я не уверен, как компонент вычисляет высоту, но это не кажется очень последовательным. Я сделал быстрый пример, чтобы показать, что я пытаюсь сказать: https://codepen.io/anon/pen/zmQWWq

  • если вы ничего не печатаете, просто нажмите на вход, компонент хорошо покажет первые три варианта и полосу прокрутки.
  • Если вы введете al (щелкните, затем нажмите назад), компонент покажет только первый вариант и не покажет его полностью.
  • Если вы наберете r (нажмите, затем нажмите назад), высота станет еще меньше.

Я обнаружил некоторые прошлые проблемы с компонентом, но он, похоже, был исправлен. Я не уверен, если это связано: https://github.com/angular/material/issues/6668

Вот часть кода, которую можно увидеть в codepen:

// ----- 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'];

Любое понимание того, как сделать так, чтобы оно всегда показывало количество элементов последовательно или, возможно, ограничивалось только максимальной высотой, будет оценено.

...