angular-js 将数组呈现为 2d table
angular-js present an array as 2d table
我的模型中有一系列书籍:
(function() {
var app = angular.module("googleBooksViewer", []);
var mainController = function($scope, $http) {
$scope.search = function(bookname) {
$http.get("https://www.googleapis.com/books/v1/volumes?q=" + bookname)
.then(function(response) {
$scope.books = response.data;
});
};
};
app.controller("mainController", mainController);
})();
我知道我可以使用 ng-repeat
将书籍缩略图显示为列表,但我希望它用每行 8 个缩略图的 table 填充屏幕。
在我看来有没有办法做到这一点 html,或者我是否必须在我的模型中创建二维数组?
我会说这更多是 CSS 问题。您可以对 book
块使用 % 宽度,使它们每行占据 8 个块(12.5%
宽度)。那么 HTML 和 ngRepeat
就很简单了:
<div class="container">
<div class="book" ng-repeat="book in books">
{{book.title}} ...
</div>
</div>
主要工作由CSS完成:
.container .book {
width: 12.5%;
float: left;
/* ... */
}
查看下面的演示。
.container {
overflow: hidden;
border: 1px #DDD solid;
}
.container .book {
width: 12.5%;
float: left;
padding: 5px;
background: #EEE;
box-sizing: border-box;
border: 1px #AAA solid;
}
<div class="container">
<div class="book">Book title 1</div>
<div class="book">Book title 2</div>
<div class="book">Book title 3</div>
<div class="book">Book title 4</div>
<div class="book">Book title 5</div>
<div class="book">Book title 6</div>
<div class="book">Book title 7</div>
<div class="book">Book title 8</div>
<div class="book">Book title 9</div>
<div class="book">Book title 10</div>
<div class="book">Book title 11</div>
<div class="book">Book title 12</div>
<div class="book">Book title 13</div>
<div class="book">Book title 14</div>
<div class="book">Book title 15</div>
<div class="book">Book title 16</div>
<div class="book">Book title 17</div>
<div class="book">Book title 18</div>
<div class="book">Book title 19</div>
<div class="book">Book title 20</div>
<div class="book">Book title 21</div>
<div class="book">Book title 22</div>
<div class="book">Book title 23</div>
<div class="book">Book title 24</div>
</div>
我的模型中有一系列书籍:
(function() {
var app = angular.module("googleBooksViewer", []);
var mainController = function($scope, $http) {
$scope.search = function(bookname) {
$http.get("https://www.googleapis.com/books/v1/volumes?q=" + bookname)
.then(function(response) {
$scope.books = response.data;
});
};
};
app.controller("mainController", mainController);
})();
我知道我可以使用 ng-repeat
将书籍缩略图显示为列表,但我希望它用每行 8 个缩略图的 table 填充屏幕。
在我看来有没有办法做到这一点 html,或者我是否必须在我的模型中创建二维数组?
我会说这更多是 CSS 问题。您可以对 book
块使用 % 宽度,使它们每行占据 8 个块(12.5%
宽度)。那么 HTML 和 ngRepeat
就很简单了:
<div class="container">
<div class="book" ng-repeat="book in books">
{{book.title}} ...
</div>
</div>
主要工作由CSS完成:
.container .book {
width: 12.5%;
float: left;
/* ... */
}
查看下面的演示。
.container {
overflow: hidden;
border: 1px #DDD solid;
}
.container .book {
width: 12.5%;
float: left;
padding: 5px;
background: #EEE;
box-sizing: border-box;
border: 1px #AAA solid;
}
<div class="container">
<div class="book">Book title 1</div>
<div class="book">Book title 2</div>
<div class="book">Book title 3</div>
<div class="book">Book title 4</div>
<div class="book">Book title 5</div>
<div class="book">Book title 6</div>
<div class="book">Book title 7</div>
<div class="book">Book title 8</div>
<div class="book">Book title 9</div>
<div class="book">Book title 10</div>
<div class="book">Book title 11</div>
<div class="book">Book title 12</div>
<div class="book">Book title 13</div>
<div class="book">Book title 14</div>
<div class="book">Book title 15</div>
<div class="book">Book title 16</div>
<div class="book">Book title 17</div>
<div class="book">Book title 18</div>
<div class="book">Book title 19</div>
<div class="book">Book title 20</div>
<div class="book">Book title 21</div>
<div class="book">Book title 22</div>
<div class="book">Book title 23</div>
<div class="book">Book title 24</div>
</div>