html - AngularJs ng-repeat 新建 <div>

Question

我正在尝试使用 angularjs ng-repeat 打印按钮 但现在我有这样的

第二个和第三个按钮在 div 之外， 但我想以这种方式拥有

第二个和第三个按钮被移到 next 中，所以我可以“合并” 两个，然后把名字放在中间。

现在我有以下代码

get actionBarConfig1() {
            var action1 = {
                icon: '<i class="fa fa-truck"></i>',
                name: "Truck announcement",
                actionEvent: () => { this.$state.go(truck.TruckAnnouncementState.list) },
                order: 1
            };
            var action2 = {
                icon: '<i class="fa fa-train"></i>',
                name: "Rail announcement",
                actionEvent: () => { this.$state.go(rail.RailAnnouncementState.list) },
                order: 2,
                active: false
            };
            var action3 = {
                icon: '<i class="fa fa-dashboard"></i>',
                name: "Dashboard",
                actionEvent: () => { this.$state.go("app.dashboard.index") },
                order: 0,
                large: true
            };
            var action4 = {
                icon: '<i class="fa fa-truck"></i>',
                name: "Truck announcement",
                actionEvent: () => { this.$state.go(truck.TruckAnnouncementState.list) },
                order: 4
            };

            let group1 = {
                order: 1,
                name: "Prva grupa",
                buttons: [action1, action2, action4]
            }

            let group2 = {
                order: 2,
                name: "Druga grupa",
                buttons: [action3, action1, action2]
            }

            let group3 = {
                order: 2,
                name: "Tretja grupa",
                buttons: [action3]
            }

            return {
                groups: [
                    group1,
                    group2,
                    group3
                ],
                heigth: "130px",
                sticky: true,
            }
        }

    .row-group-name {
        position: absolute;
        bottom: 0px;
        text-align: center;
        width: 100%;
    }

    .grid-container-action {
        width: 2000px;
        max-width: 2000px;
    }

    [class*='action-col-'] {
        position: relative;
        float: left;
        min-height: 118px;
        max-height: 120px;
        max-width: 16.66%;
        padding: 1px;
        background-color: white;
    }

    .action-col-1 {
        width: auto;
    }

    .action-col-2 {
        width: 33.33%;
    }

    .largeButton {
        font-size: 50px;
    }

    span.block {
        display: block;
    }

<div class="action-col-1" ng-repeat="group in vm.config.groups | orderBy:'order'">

            <div class="row row-action-group" ng-repeat="button in group.buttons | orderBy:'order'"       style="text-align: left">
                <div ng-if="button.large" class="largeButton">
                    <button ng-click="button.actionEvent">
                        <div class="row-group-body" ng-bind-html="button.icon"></div>
                        <span class="block" style="font-size: 14px">{{button.name}}</span>
                    </button>
                </div>
                <div ng-if="!button.large">
                    <button ng-click="button.actionEvent">
                        <span class="row-group-body" ng-bind-html="button.icon"></span>
                        <span>{{button.name}}</span>
                    </button>
                </div>
            </div>

如果它不是像“dashboard”这样的大按钮，我希望最多有 3 个按钮，比如 truck ann。

<div ng-if="button.large" class="largeButton">

我认为在这个 div 之后我需要休息一下并使用 ng-repeat

创建一个新的 div

问候

Answer 1

我用 css 类 .action-col-1 中的 css flex 解决了

display: flex;
flex-wrap: wrap;
flex-direction: column;