如何在angularjs中仅显示基于特定条件的选定div元素

Question

So this is the snippet of my code, the aim here is to either hide or show the h4 element based on my condition.

 <h4 ng-hide="data_startupcosts.note == ' '">THE COST OF STARTING THIS VENTURE</h4>
 <div ng-repeat="data_startupcosts in data.startupcosts track by $index">
 {{data_startupcosts.note}}
 <ul ng-repeat="data_startupcosts_lists in data_startupcosts.list track by $index">
 <li>

I used ng-hide with an expression but no luck...... any suggestions?????

Answer 1

You use the data_startupcosts outside your ng-repeat , so that variable won't exist in there. Instead use it inside your ng-repeat scope:

<div ng-repeat="data_startupcosts in data.startupcosts track by $index">
    <h4 ng-hide="data_startupcosts.note == ' '">THE COST OF STARTING THIS VENTURE</h4>
    {{ data_startupcosts.note }}
    <ul ng-repeat="data_startupcosts_lists in data_startupcosts.list track by $index">
        <li>..</li>
    </ul>
</div>

Or, if you really want it outside the div, use ng-repeat-start :

<h4 ng-repeat-start="data_startupcosts in data.startupcosts track by $index" 
    ng-hide="data_startupcosts.note == ' '">THE COST OF STARTING THIS VENTURE</h4>
<div ng-repeat-end>
    {{ data_startupcosts.note }}
    <ul ng-repeat="data_startupcosts_lists in data_startupcosts.list track by $index">
        <li>..</li>
    </ul>
</div>

Also make sure your condition is correct, you are comparing with a single space, but maybe there isn't any space? ( data_startupcosts.note == '' )