javascript - Angular' Bootstrap 下拉按钮大小

Question

我有一些要求迫使我将 angular bootstrap 下拉菜单的样式设置为 this。 :

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

如您所见，我在下拉列表的右上角有一个小三 Angular 形，当您选择一些宽度较短的选项时，它会导致问题。如下图

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

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

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

drop-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");

                    }

                };
            }
        };
    }]);