如何在标记为空(不包含文本)时使用ng-hide隐藏标记

Question

我想使用ng-hide指令隐藏每个没有内容的标签(简单文本).这是我想要实现的目标:

<div class="menu-head" ng-hide="c1.section == ''">{{c1.section}}</div>

但这不起作用.但是,以下两个评估为true(为了测试目的,我将c1.section字段设置为'Section 1'的值)并且相应的div变为隐藏:

<div class="menu-head" ng-hide="c1.section == c1.section">{{c1.section}}</div>
<div class="menu-head" ng-hide="c1.section == 'Section 1'">{{c1.section}}</div>

c1.section通过

<div ng-repeat="c1 in col1">

来自这个控制器:

function MenuCtrl($scope) {
    "use strict";
    $scope.col1 = MenuData.col1;
    $scope.col2 = MenuData.col2;
    $scope.col3 = MenuData.col3;
}

对象col1可能包含或可能不包含字段"section".很明显,每当对象中缺少一个字段(任何字段)时,我希望它的div缺失/不显示在DOM中.这是MenuData对象:

var MenuData = {
    col1: [
        {section: 'Section 1'}, // <-here the fields id, name, price and descr are missing so their divs must not show up in the DOM.
        {
            id: '1',
//            section: 'Section 2', <- here the field section is missing (commented-out).
            name: 'Position 1',
            price: '2.50',
            descr: 'some description'
        },
        {section: 'Section 3'},
        {
            id: '2',
            section: 'Section 4',
            name: 'Position 2',
            price: '4.75',
            descr: ''
        }
    ]
};

当'c1.section'数据绑定中没有内容时,如何使ng-hide的表达式评估为'true'？

Answer 1

您应该能够使用以下代码:

<div ng-hide="!c1.section">

这将隐藏divwhen c1.section等于''或当c1对象没有section属性时.

为了您的方便,我在http://plnkr.co/edit/aOe7Vc8lmYf43ODkCymx?p=preview创建了一个工作的Plnkr.

希望有所帮助!