Question

我有一些要求迫使我将角度引导下拉样式设置为this：

一切正常，但我需要让按钮的文字响应。所以用户在下拉列表中选择的内容应该显示在按钮中。

正如您所看到的，我在下拉列表的右上方有一个小三角形，当您选择宽度较短的选项时会产生问题。如下所示

我的问题我，有什么方法可以解决这个问题吗？例如，通过设置按钮等于我在下拉列表中的最大长度？或任何其他解决方案？

你可以在这里找到所有代码：

http://plnkr.co/edit/zmDUjqdtPsql9GJjva4T?p=info

angular.module('ui.bootstrap.demo').directive('uibDropdownTemplate', ['$log',  function ($log) {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                defaultText: '@',
                options: '=',             
                selectedOption: '='
            },
            templateUrl: 'drop-down.html', 
            controller: function() {

            },            
            link: function (scope, element, attrs) {

                if (scope.selectedOption === undefined) {
                    scope.selectedOption = scope.defaultText;
                }

                scope.selectedChange = function(option,$event){ 
                    if(scope.selectedOption === option) {
                        scope.selectedOption = scope.defaultText                        
                        $($event.target).removeClass("option-selected");
                    }               
                    else
                    {
                        scope.selectedOption = option;     
                        $("ul.dropdown-menu>li>a").removeClass("option-selected");
                        $($event.target).addClass("option-selected");

                    }

                };
            }
        };
    }]);

Answer 1

在没有摆弄字体和em之类的情况下，我只能在设置宽度方面提出一个快速而肮脏的解决方案。但是，一般概念是确定选项的最大长度，然后使用ng-class手动将preCaretText上的宽度设置为所需的宽度。我的例子是，我把它设置为最大长度x 7像素，这在我的Chrome浏览器上看起来非常接近。

http://plnkr.co/edit/vK3DxLM7mNuKG0w2Q8jv?p=preview

下拉-down.html

<div class="preCaretText" ng-style="{'width': maxOptionLength * 7+ 'px'} ">{{selectedOption}}</div>

<强> example.js

angular.module('ui.bootstrap.demo').directive('uibDropdownTemplate', ['$log', function ($log) { return { restrict: 'EA', replace: true, scope: { defaultText: '@', options: '=', selectedOption: '=' }, templateUrl: 'drop-down.html', controller: function() { }, link: function (scope, element, attrs) { var maxOptionLength = Math.max.apply(Math, scope.options.map(function (el) { return el.length })); scope.maxOptionLength = maxOptionLength; if (scope.selectedOption === undefined) { scope.selectedOption = scope.defaultText; } scope.selectedChange = function(option,$event){ if(scope.selectedOption === option) { scope.selectedOption = scope.defaultText $($event.target).removeClass("option-selected"); } else { scope.selectedOption = option; $("ul.dropdown-menu>li>a").removeClass("option-selected"); $($event.target).addClass("option-selected"); } }; } }; }]);

Answer 2

在按钮和下拉列表中使用btn-block是不是一个选项？这样他们就可以获得父元素的大小：

<div>
    <div class="btn-group btn-block" uib-dropdown >
        <button type="button" class="btn drop btn-block" uib-dropdown-toggle>
            <div class="preCaretDiv">
                <div class="preCaretText">{{selectedOption}} </div>
                <div class="caretCircle">
                    <span class="caret"></span>
                </div>
            </div>
        </button>
        <ul class="uib-dropdown-menu btn-block" role="menu" aria-labelledby="button-template-url">    
            <li role="menuitem" ng-repeat="option in options" ng-click="selectedChange(option,$event)"><a href="">{{option}}</a></li>           
        </ul>
    </div>
</div>

http://plnkr.co/edit/8IiSWese3fVtnG29MmFK?p=preview

Angular'Bootstrap下拉按钮大小

2 个答案: