Angular directives: ng-if
Quote from luishp on August 26, 2020, 12:37 pmIf 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.
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.
Quote from CDY@44 on August 26, 2020, 3:03 pmHi 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,
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,
Quote from luishp on August 26, 2020, 5:30 pm@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.
@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.