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.

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


@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]==[].toString()" class="panel-primary" style="margin-bottom:20px;">
        <div class="panel-heading"><strong>ID:</strong> []</div>
        <div class="panel-body" style="background:#f3f3f3;">
             <div><strong>Name:</strong> []</div>
             <div><strong>Age:</strong> [object.age]</div>

The ng-if compares [nombre] with [].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]==[].toString()">
             <div><strong>ID:</strong> []</div>
             <div><strong>Name:</strong> []</div>
             <div><strong>Age:</strong> [object.age]</div>

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.

Thank you for the explanation !!!

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