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

Question

我想使用 ng-hide 指令隐藏每个没有内容(简单文本)的标签。以下是我正在努力实现的目标:

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

但这不起作用。但是，以下两个计算结果为真(出于测试目的，我将 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">

来自这个 Controller :

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”数据绑定(bind)中没有内容时，如何使 ng-hide 的表达式计算为“true”？

Answer 1

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

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

当 c1.section 等于 '' 或 c1 对象不等于时，这将隐藏 div'没有 section 属性。

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

希望对您有所帮助!