Как показать флажки в хорошо выровненных строках при использовании ng-repeat?

В моей HTML странице я извлечение булевых данных из базы данных, я хочу, чтобы показать их в сетке, но они все дни выглядят некрасивоКак показать флажки в хорошо выровненных строках при использовании ng-repeat?

Я использую

<table> 
    <tr> 
    <td ng-repeat="tab in allTabs"><md-checkbox>{{tab.name}}</md-checkbox></td> 
    </tr> 
</table>

Это делает одну строки, я хочу это более умным чтобы соответствовать определенной ширине и создать еще одну строку, если количество элементов превышает

источник

2017-01-24 Mohamed Elshawaf

Вам нужно будет создать новый '', если вы хотите, чтобы они были на новой строке. Попробуйте ввести еще один 'ng-repeat', который контролировал количество строк. Затем внутри 'ng-repeat' будет выводиться вкладки для этой строки. –

Можете ли вы поместить свой код в jsfiddle, чтобы показать проблему? Ответы, которые вы получите, будут проще для вас реализовать таким образом. – LucyMarieJ

Похожи, что вы используете угловатый дизайн материала ..
вы можете увидеть ниже конструкцию здесь у меня есть четыре галочки в строке и если есть более четырех, он перейдет к следующей строке

<div layout="row" layout-wrap> 
    <md-input-container class="md-block" flex-gt-sm="25" flex="45" content-layout-align="center start" ng-repeat="tab in allTabs"> 
    <md-checkbox ng-model="tab.value" aria-label="tab.key"> 
     {{tab.key}} 
    </md-checkbox> 
    </md-input-container> 
</div> 

    $scope.allTabs = [{ 
    key: 'Courier Docket', 
    value: false 
    }, { 
    key: 'Completion Report', 
    value: false 
    }, { 
    key: 'Images', 
    value: false 
    }, { 
    key: 'Fourth One', 
    value: false 
    }];

EDIT

Я добавив jsfiddle ссылку на этот ответ ..

JS-FIDDLE

источник

2017-01-24 13:54:39 Rakeschand

Могу ли я увеличить количество элементов в строке? –

Да, просто измените значение 'flex' -' flex = "20" 'создаст 5 за строку,' flex = "10" будет создавать 10 за строку и т. Д. – Fissio

Я пробовал, но не менял, все еще те же 4 пункта/ряд! –

использование нг-повтора в вашем мкр-флажком это позволит вам добавьте больше css в td, и вы можете указать ширину вашего td, в этом случае он автоматически переместится в следующую строку

<table> 
    <tr > 
     <td style="width:100px"><md-checkbox ng-repeat="tab in allTabs">{{tab.name}}</md-checkbox></td> 
    </tr> 
    </table>

источник

2017-01-24 14:08:25

Как показать флажки в хорошо выровненных строках при использовании ng-repeat?

ответ

Смежные вопросы