javascript - How to hide a tag with ng-hide when the tag is empty (contains no text) - Stack Overflow

admin管理员组

文章数量:1336631

I want to hide every tag which has no content (simple text) using ng-hide directive. Here's what I am trying to acplish:

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

But this doesn't work. However, the following two evaluate to true (for testing purposes I set the c1.section field to the value of 'Section 1') and the respective div bees hidden:

<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>

The c1.section is accessed via

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

from this controller:

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

Where the object col1 may, or may not contain the field 'section'. So obviously whenever a field (any field) is missing from the object, I want its div to be missing/not showing in the DOM. Here's the MenuData object:

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 (mented-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: ''
        }
    ]
};

How do I make the expression of ng-hide to evaluate to 'true' when there is no content in 'c1.section' data binding?

I want to hide every tag which has no content (simple text) using ng-hide directive. Here's what I am trying to acplish:

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

But this doesn't work. However, the following two evaluate to true (for testing purposes I set the c1.section field to the value of 'Section 1') and the respective div bees hidden:

<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>

The c1.section is accessed via

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

from this controller:

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

Where the object col1 may, or may not contain the field 'section'. So obviously whenever a field (any field) is missing from the object, I want its div to be missing/not showing in the DOM. Here's the MenuData object:

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 (mented-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: ''
        }
    ]
};

How do I make the expression of ng-hide to evaluate to 'true' when there is no content in 'c1.section' data binding?

• javascript
• angularjs

Share Follow edited Jun 23, 2013 at 19:51 Jared Tomaszewski asked Jun 23, 2013 at 19:24 Jared TomaszewskiJared Tomaszewski 80344 gold badges1919 silver badges3131 bronze badges 2

• What's c1.section? What do you set it to initially? Is it 'empty string' or is it perhaps undefined? – Benjamin Gruenbaum Commented Jun 23, 2013 at 19:27
• 1 Can you just use ng-show instead? – imaginaryboy Commented Jun 23, 2013 at 19:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You should be able to use the following code:

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

This will hide the div when c1.section equals '' or when the c1 object doesn't have a section property.

I have created a working Plnkr for your convenience at http://plnkr.co/edit/aOe7Vc8lmYf43ODkCymx?p=preview

Hope that helps!

本文标签： javascriptHow to hide a tag with nghide when the tag is empty (contains no text)Stack Overflow