Question

我正在尝试使用Angular显示结果'table'（使用DIV构建）。数据看起来像这样：

[['sydney','hotel','2','5','1'],
['sydney','bar','6','5','2'],
['sydney','stand','2','7','3'],
['melbourne','hotel','2','5','1'],
['melbourne','bar','8','0','1']]

我首先想要的是抑制重复的城市名称，以便第一行在开始时显示'sydney'，但第二行和第三行不显示。然后第四个说'墨尔本'，第五个说没什么。

我使用这样的标记实现了这个目标：

<div class="row-container"
    ng-repeat="row in resultsRows" 
    <div 
        ng-repeat="cell in row track by $index" 
        ng-bind="showValue( cell )">
    </div>
</div>

控制器中的showValue（）函数如下所示：

$scope.currentCityName = '';    
function showValue( val ) {
        var outValue = '';
        if (this.$index === 0) {
            if (val === $scope.currentCityName) {
                outValue = '';
            } else {
                $scope.currentCityName = val;
                outValue = val;
            }
        } else {
            outValue = val;
        }
        return outValue;
    }

也许这有点笨重，但它有效并且我得到了：

sydney    hotel  2  5  1
          bar    6  5  2
          stand  2  7  3
melbourne hotel  2  5  1
          bar    8  0  1

但是，现在，我希望其中包含城市名称的行具有不同的背景颜色。

我认为我想要的是任何'TR'DIV（我称之为因为它包含左浮动的'TD'DIV并且其中包含数据点）来检查它的第一个子DIV是否为空（因为它有城市名称），如果是，则为其背景着色。

我的问题是：我如何使用Angular？或者我错过了另一个技巧..？

如何在ng-repeat循环中获取一个项目以询问子元素？

Answer 1

您使用的是ng-repeat，其中包含$even和$odd等内置值：

$even   boolean true if the iterator position $index is even (otherwise false).
$odd    boolean true if the iterator position $index is odd (otherwise false).

使用ng-class根据$even和$odd提供不同的分类。

如何使用Angular基于子元素的状态设置类？

1 个答案: