Updated Plunker

Question

我正在尝试制作网格视图的简单演示。其中我有标题标题（有灰色背景）实际上我需要减少具有灰色背景的表格或标题的高度。我们可以添加替代颜色行？请看看给定的图像。与我的plunker相比，它的标题或者tittle太小。其次，行中有另一种颜色。我们可以在我的plunker中添加它。 checkboxOptions-property

.search.list-inset, .search.list-inset .item:first-child {
  border-radius: 50px;
}
.search .item-input .icon {
  font-size: 200%;
}
.gray-20 {
  background-color: #eee;
}
@media (min-width: 600px) {
 .search {
   width: 50%; 
   margin-left:auto; 
   margin-right: auto;
 }
}
.mrginrightleft{
   margin-left:5%; 
   margin-right:15%;
}
.brd{
  border: 1px solid grey;
}

这是我的代码！[在此输入图像说明] [1]

Answer 1

Updated Plunker

如何设置条纹行的样式

有两种方法可以做到这一点。一个是使用：nth-child（偶数）或（奇数）伪类的纯CSS。您可以在行中添加一个类，并根据需要使用样式，例如：

my-class:nth-child(even) .col {
  background-color: blue;
}

但我做了不同的教导你关于ng-repeat的事情。是的，这是一个循环，但它有一堆特殊的属性，它为你揭示。两个特别是$ odd和$ even。正如您所料，如果奇数迭代，则$ odd返回true，当索引为偶数时，$ odd返回true。

因此，您可以将这些与ng-class一起用作表达式的一部分。在这里，我添加了一类奇数行：

<div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">

然后为了制作样式，我添加了以下规则。我将背景颜色应用于.col子项，以便背景将包含在.col元素上应用的边框内。

.odd-row .col {
  background-color: #eee;
}

修改实际上，你是正确的，ng-style将是第三种，但它不适用于类，它应用内联样式。因此，您需要使用样式传递一个对象，例如（简化）：

ng-style="{'color': 'red'}"

如何在表格视图或网格视图中减少标题的高度？

1 个答案:

Updated Plunker