【发布时间】：2019-10-03 14:50:57
【问题描述】：
我正在尝试将 angularjs 数据保存在使用 css 网格设置样式的 div 中。这是代码笔：https://codepen.io/centem/pen/Rwbmmdy
表格溢出到网格的标题部分。在一个单独的现实世界项目中，数据跨越整个页面长度，溢出所有 css div 容器。如何将从 angularjs 检索到的数据保存在内容 div 中？谢谢。
var app = angular.module('myApp', []);
app.controller('myController',
function ($scope, $http) {
$scope.list = [
{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
});html, body {
background-color: #ffeead;
margin: 10px;
font-size: 20px;
}
p {
color: #96ceb4;
text-align: center;
}
.flexbox-header > div {
display: flex;
font-size: 1em;
padding: 10px 20px;
}
.header :nth-child(2) {
padding: 0 40px;
}
.header :nth-child(3) {
margin-left: auto;
}
.grid-page > div {
color: #ffeead;
display: flex;
align-items: center;
padding: 0px 20px;
}
.flexbox-header {
display: flex;
background-color: #96ceb4;
color: #ffeead;
}
.flexbox-header :nth-child(2) {
text-align: center;
}
.grid-page {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px 70% 40px;
}
.header {
grid-column: span 12;
background-color: #96ceb4;
align-items: center;
}
.left-menu {
grid-column: span 2;
background-color: #ff6f69;
}
.content {
grid-column: span 8;
background-color: #ffcc5c;
}
.right-menu {
grid-column: span 2;
background-color: #ff6f69;
}
.footer {
grid-column: span 12;
background-color: #88d8b0;
}
table
{
width: auto;
font: 17px Calibri;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="flexbox-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
GRID PAGE
<div class="grid-page">
<div class="header">HEADER</div>
<div class="left-menu">MENU</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td><a href="#">{{birds.ID}}</a></td>
<td><a href="#">{{birds.Name}}</a></td>
<td><a href="#">{{birds.Type}}</a></td>
</tr>
</table>
</div>
<div class="right-menu">CHARTS</div>
<div class="footer"></div>
</div>
</div>【问题讨论】：
标签： javascript html css angularjs