AngularJs ng-repeat创建新的<div>

Question

我尝试使用angularjs ng-repeat打印按钮 但是现在我喜欢这个

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

第二个和第三个按钮在下一个移动，所以我可以＆＃34;合并＆＃34; 两个并将名字放在它的中心。

现在我有以下代码

＆＃13;

＆＃13;

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,
            }
        }

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果它不是像＆＃34;仪表板＆＃34;这样的大按钮，我希望有最多3个按钮，如卡车安。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 我想在这个div之后我需要做一个休息并使用ng-repeat

创建一个新的div

问候

Answer 1

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

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