Блог

Главная - Вопросы по программированию - Как распечатать массив элементов с помощью тега list и angular js таким образом, чтобы они отображались в трех строках и трех столбцах

Как распечатать массив элементов с помощью тега list и angular js таким образом, чтобы они отображались в трех строках и трех столбцах

#angularjs

#angularjs

Вопрос:

Я пытаюсь распечатать список имен, чтобы на странице они были в виде сетки. Что у меня есть на данный момент.

 <html ng-app>
<head> <script src="angular.js"></script></head>
<body ng-init= "names=['Bob', 'Bill', 'Sarah', 'Robert', 'Sam', 'Jill', 'Dave', 'Larry', 'Jack']">
<ul ng-repeat="firstname in names">
<li>{{firstname}}</li>
</ul>
</body>
</html>

Он должен печататься следующим образом:
Боб, Билл, Сара
Роберт, Сэм, Джилл
Дэйв, Ларри, Джек

Комментарии:

1. какую ошибку вы получаете? Если отображение неверно, вы должны настроить его с помощью css

Ответ №1:

Переместите ng-repeat в li…

 <ul>
    <li ng-repeat="firstname in names">{{firstname}}</li>
</ul>

И вы можете превратить их в встроенные блоки с помощью CSS…

 ul {
    width: 100%;
    margin: 0;
    padding: 0;
}
ul li {
    display: inline-block;
    width: 33%;
    min-height: 100px;
    background: #ccc;
    border: solid 1px black;
    margin: -1px;
}

Демонстрационная скрипка