Angular directives: ng-if - Forum

Forum Navigation
You need to log in to create posts and topics.

Angular directives: ng-if

If you found nr-repeat AngularJS directive useful, take a look at what ng-if can do for you.
In the attached sample I use ng-if to only show information that meets a given condition dinamically.
This simplifies a lot providing searching tools and showing data collections.

Uploaded files:
  • You need to login to have access to uploads.
Vadim has reacted to this post.
Vadim

Hi Luis,
Excuse me, but can you give more information of how this works, cause I open the file and I don't understand how the "TextInput" works... I don't see any code attached to the "TextInput"... I am lost...

Regards,

@cdy44-2 it's so easy that seems confusing at first.
There is no code at all! The text field just change the [nombre] variable value.
All the magic is done into the Container HTML:

<span ng-repeat="object in ArrayOfJSONs">
  <div ng-if="[nombre]==[object.name].toString()" class="panel-primary" style="margin-bottom:20px;">
        <div class="panel-heading"><strong>ID:</strong> [object.id]</div>
        <div class="panel-body" style="background:#f3f3f3;">
             <div><strong>Name:</strong> [object.name]</div>
             <div><strong>Age:</strong> [object.age]</div>
        </div>
  </div>
</span>

The ng-if compares [nombre] with [object.name].toString() so when you write a name that is equal to any of the names in the JSON array, it's displayed.

This would be a simplified version with less CSS:

<span ng-repeat="object in ArrayOfJSONs">
  <div ng-if="[nombre]==[object.name].toString()">
             <div><strong>ID:</strong> [object.id]</div>
             <div><strong>Name:</strong> [object.name]</div>
             <div><strong>Age:</strong> [object.age]</div>
  </div>
</span>

If you delete the ng-if directive, all records will be shown because the ng-repeat directive.
The ng-if directive adds a conditional comparison to show only the content that meets the condition.

CDY@44 has reacted to this post.
CDY@44

Thank you for the explanation !!!

Open chat
1
Do you need more info?
Hi, do you have any doubt?