Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
AngularJs+;引导:下拉菜单缺少彼此之间的间隙_Angularjs_Twitter Bootstrap_Drop Down Menu - Fatal编程技术网

AngularJs+;引导:下拉菜单缺少彼此之间的间隙

AngularJs+;引导:下拉菜单缺少彼此之间的间隙,angularjs,twitter-bootstrap,drop-down-menu,Angularjs,Twitter Bootstrap,Drop Down Menu,当我试图使用angularjs呈现一些引导下拉列表时,UI有一个奇怪的问题:每个下拉列表之间的间隔消失了,如图所示(参见前两个下拉列表) 这是我的代码: var lcApp = angular.module('lcApp', [], function () {}); lcApp.factory('historyService', function() { return { filters: [ { name: 'year', l

当我试图使用angularjs呈现一些引导下拉列表时,UI有一个奇怪的问题:每个下拉列表之间的间隔消失了,如图所示(参见前两个下拉列表)

这是我的代码:

var lcApp = angular.module('lcApp', [], function () {});

lcApp.factory('historyService', function() {
    return {        
        filters: [
            { name: 'year', label: 'Năm', type: 'dropdown', value: '', options: [{ label: '2014', value: '2014' }, { label: '2013', value: '2013' }, { label: '2012', value: '2012' }] },
            { name: 'month', label: 'Tháng', type: 'dropdown', value: '', options: [{ label: '2014', value: '2014' }, { label: '2013', value: '2013' }, { label: '2012', value: '2012' }] }
        ]
    };
});

lcApp.controller('historyController',
    function ($scope, $rootScope, $location, $log, $window, historyService) {

        // get filter data
        $scope.filterData = historyService.filters;
        $log.info('Load filters success');

        // filter click
        $scope.filterClick = function(filter, option) {
            filter.value = option.value;
        };

    });
用户界面:

<div class="btn-group" ng-repeat="flt in filterData">
    <a class="btn btn-default btn-sm" href="" data-toggle="dropdown" data-hover="dropdown">Tháng</a>
    <ul class="dropdown-menu">
        <li>
            <a href="">
                <i class="fa fa-pencil"></i> Edit </a>
        </li>
    </ul>
</div>

<div class="btn-group">
    <a class="btn btn-default btn-sm" href="" data-toggle="dropdown" data-hover="dropdown">Ngày</a>
    <ul class="dropdown-menu">
        <li>
            <a href="">
                <i class="fa fa-pencil"></i> Edit </a>
        </li>
    </ul>
</div>

<div class="portlet-input input-inline input-medium">
    <div class="input-icon right">
        <i class="icon-magnifier"></i>
        <input type="text" placeholder="tên hoặc email" class="form-control">
    </div>
</div>


没有什么特别的,只是一个ngRepeat指令,将我的过滤器呈现为下拉列表。

删除
btn组的包装,它们使按钮堆叠在一起。

按钮是否附加了
边距:0
?嗨,使用firebug识别HTML,DOM元素中没有添加任何特别的内容,它们都是一样的,我真的不知道为什么,在Chrome和Firefox上测试:(我猜它们是
内联块
元素,要么设置了一些边距,要么浏览器的默认边距没有设置为0。没有使用边距来填补它们之间的空白,我仍然不知道为什么会有空白。不需要有边距。如果不设置为0,浏览器有时会实现边距。)这就是为什么我们使用CSS重置和规范化程序。