Angular'Bootstrap下拉按鈕大小

Question

我有一些要求，迫使我的風格的角度引導下拉要像這樣 ：

一切正常，除了我需要使按鈕的文本響應。 因此，用戶在下拉列表中選擇的內容都應顯示在按鈕中。

如您所見，我在下拉列表的右上角有一個小三角形，當您選擇寬度較小的某個選項時，將會引起問題。 像下面

我的問題是，有什么辦法可以解決這個問題？ 例如通過設置與等於我在下拉列表中的最大長度的按鈕的？ 或其他解決方案？

您可以在此處找到所有代碼：

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