Question

<table>
    <tr ng-repeat="(key, values) in myData">
        <td> {{ key}} </td>
        <td>
            <div ng-repeat="item in values| limitTo:limit | filter: {source: sourceFilter}" ng-include="'templates/item.html'"/>
        </td>
    </tr>
</table>

使用上面的代码我循环遍历keys / values，其中key是一个字符串，value是一个数组。我正在通过'source'属性过滤值 - 这意味着有时某些键没有显示任何项目。我想隐藏所有没有任何项目的行。

我尝试过使用自定义过滤器和ng-show / ng-hide，但由于我是一个有角度的菜鸟，我似乎无法弄清楚如何做到这一点。有人能告诉我一个如何实现这个目标的例子吗？非常感谢。

Answer 1

您可以这样做：

<tr ng-repeat="(key, values) in myData" ng-hide="itemValues.length == 0">
    <td> {{ key}} </td>
    <td>
        <div ng-repeat="item in values = (itemValues | limitTo:limit | filter: {source: sourceFilter})" ng-include="'templates/item.html'"/>
    </td>
</tr>

Answer 2

尝试：

<table>
    <tr ng-repeat="(key, values) in myData" 
        ng-hide="(values | filter: {source: sourceFilter).length == 0">
        <td> {{ key}} </td>
        <td>
            <div ng-repeat="item in values| limitTo:limit | filter: {source: sourceFilter}" ng-include="'templates/item.html'"/>
        </td>
    </tr>
</table>

Plunker

中的一些示例

Answer 3

我通常会制作一个处理这种情况的指令，这样我可以多次使用它而且我不会重复代码。类似的东西：

.directive('nodata', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            window.setTimeout(function () {
                if (element[0].innerText === '') {
                    element[0].innerText = '–';
                    element.css({
                        # use css here to display none or change color etc
                        # at your preference   
                    });
                }
            }, 0);
        }
    };
}])

然后您只需将nodata>{{ yourAngular.binding }}添加到您的html元素。

如果没有角度数据，请隐藏

3 个答案: