Ng-if to show and hide td data - angularjs

Attached is my code, tried showing td data when the condtion of ng-if is true
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<div ng-repeat="value in data_report"
ng-if="(fellow.F_Id==value.fellowship_id)? (show_row = true) : (show_row=false)">
<td ng-show="show_row">{{value.Completed}}</td>
<td ng-hide="show_row">0</td>
<td ng-show="show_row">{{value.Not_Updated}}</td>
<td ng-hide="show_row">0</td>
<td ng-show="show_row">{{value.Total_schedule}}</td>
<td ng-hide="show_row">0</td>
</div>
</tr>
</tbody>
Its just giving 0 as result. Though data_report is having values
Tried adding span in td with conditions in td and result in span.
still the result is zero
May I know where the logic is going wrong and how it can be achieved?
Changed the code to
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<td>
<span ng-repeat="value in data_report" ng-show ="fellow.F_Id==value.fellowship_id">{{value.Completed}}</span>
</td>
<td>
<span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Not_Updated}}</span>
</td>
<td>
<span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Total_schedule}}</span>
</td>
</tr>
</tbody>
Here i am getting values but how can i set default value to zero if there are no values present?

In your case ng-if returns no boolean
The usage is (DOCs):
<ANY
ng-if="expression">
...
</ANY>
I think you dont need ng-if at all. You can write something like:
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<div ng-repeat="value in data_report">
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Completed: 0}}</td>
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Not_Updated: 0}}</td>
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Total_schedule: 0}}</td>
</div>
</tr>
</tbody>
Its not best solution, in Javascript you can set for example value.Completed to be by default 0. It will help you to simplify your HTML

Related

Angular ng-repeat with ng-if not working on tr tag

In the below Div i am using ng-repeat across some data to populate a list. while doing this i would like to NOT have a a certain TR tag created if it fits a certain requirement by using the ng-if directive on x.Equipment_Cost_Child != 0 However regardless of the expression I can't get the ng-if to work properly.
How can i get it to only show the TR if x.Equipment_Cost_Child > 0 ?
I have tried "x.Equipment_Cost_Child > 0"
I have also attached the ng-if directly to the tr tag instead of a div tag.
what do you think?
<div ng-repeat="x in reservationdata" ng-click="customerClickedEvent(x.ID)">
<table class="unit">
Item:{{$index + 1}}
<tr>
<td style="font-weight:bold">Equipment Type: </td>
<td style="font-weight:bold">{{x.EquipmentType}}</td>
</tr>
<tr>
<td style="font-weight:bold" >Equipment Count: </td>
<td style="font-weight:bold">{{x.Equipment_Count}}</td>
</tr>
<tr>
<td>Adult Quantity: </td>
<td>{{x.Equipment_Count_Adult}} Cost # ${{x.Duration_Cost_Adult}}</td>
</tr>
<div ng-if="x.Equipment_Cost_Child != 0"> //this line doesn't work
<tr>
<td>Child Quantity: </td>
<td>{{x.Equipment_Count_Child}} Cost # ${{x.Duration_Cost_Child}}</td>
</tr>
</div>
<tr>
<td>Sending Letters: </td>
<td> {{x.Equipment_Form_Status}}</td>
</tr>
<td> Total Cost For Item: </td>
<td> ${{(x.Equipment_Count_Adult * x.Duration_Cost_Adult)+(x.Equipment_Count_Child * x.Duration_Cost_Child)}}
Use both ng-if and ng-repeat within one tag:
<tr ng-repeat="feature in features"
ng-if="feature.id === 1" >
</tr>
Or, if you want to conditionally display some templates you may use ng-switch for example:
<tr
ng-repeat="feature in features"
ng-switch="feature.id" >
<span ng-switch-when="1"></span>
<span ng-switch-when="2"></span>
</tr>
Replace:
<div ng-if="x.Equipment_Cost_Child != 0"> //this line doesn't work
<tr>
<td>Child Quantity: </td>
<td>{{x.Equipment_Count_Child}} Cost # ${{x.Duration_Cost_Child}}</td>
</tr>
</div>
By:
<tr ng-show="x.Equipment_Cost_Child > 0">
<td>Child Quantity: </td>
<td>{{x.Equipment_Count_Child}} Cost # ${{x.Duration_Cost_Child}}</td>
</tr>
<div> tag is breaking your <tr> list. You can use ng-if directly on <tr>.
EDIT: use ng-show or ng-hide to show/hide elements. It is much lighter weight, because ng-if triggers a DOM recompilation and generates a new scope.

Div inside tbody with ng-if not filtering the result

First of all let me please accept angular and html is not my trade.
Following is my scenario
<tbody ng-repeat="item in items.ItemList">
<div ng-if="item.variableName == false">
<tr>
<tr/>
<tr ng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</div>
</tbody>
I am trying to control the table rows that I wan't to display with ng-if inside the div and it is not working. By moving ng-if to tbody will filter the rows fine but not at div level.
Unfortunately, I can't move ng-if to the tbody as I have to deal with the else part of the if condition and in that case there is an array inside each item of the repeater that should render rows separately.
Following is the output that I want to have once ng-if condition works appropriately.
P.S. I am not specific to the <div> tag here. I am open to replace div with any other tag as long as it can get me the desired result.
Here someone might say why not ng-if at <tr> level? I am using ng-show and ng-animate so the row with ng-if changes its scope in Doom object and hover over functionality stops working.
<tbody ng-repeat="item in items.ItemList">
<div ng-if="item.variableName == false">
<tr>
<tr/>
<tr ng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</div>
<div ng-if="item.variableName == true">
<tr>
<tr/>
<trng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</div>
</tbody>
I use this and it's work.
Look exemple in the jsfilddle
http://jsfiddle.net/ADukg/12003/
<tbody ng-repeat="item in items.ItemList" ng-show="item.variableName">
<tr>{{item | json}}</tr>
</tbody>
Div won't help you out here as it defies the rules of tbody according to html.
Use ng-container like this instead, it is of no meaning to HTML so it won't defy the rules and you will get your condition fulfilled
<tbody ng-repeat="item in items.ItemList">
<ng-container ng-if="item.variableName == false">
<tr>
<tr/>
<tr ng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</ng-container>
<ng-container ng-if="item.variableName == true">
<tr>
<tr/>
<trng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</ng-container>
</tbody>
Also in your case you can use ng-switch instead of ng-if like this
<tbody ng-repeat="item in items.ItemList" ng-switch="item.variableName">
<ng-container ng-switch-when="false">
<tr>
<tr/>
<tr ng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</ng-container>
<ng-container ng-switch-when == "true">
<tr>
<tr/>
<trng-show="isPermitted" ng-animate="isPermitted">
<tr/>
</ng-container>
</tbody>

Assign value after ng-if

I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.

How to display variables inside nested ng-repeat in angular js

how to execute below type code in angular js
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>`
This is your code
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists">{{ 'x.'+ z.field }} </td>
</tr>
Use bracket notation for the property accessor:
<!--
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>
-->
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ x[z.field] }} </td>
</tr>
Bracket notation first evaluates the contents of the brackets and uses that as the identifier of the desired property.

AngularJS(1.3.0-rc.2): data-ng-repeat-end animation issue

Im wondering why an animation will not work on the <tr> element in this case (plnkr):
<tr data-ng-repeat-end data-ng-show="employee.show" class="animate-show">
<td colspan="5">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
But will work on the <td> element when written like this (plnkr):
<tr data-ng-repeat-end ng-animate-children>
<td colspan="5" data-ng-show="isToggled[$index]" class="animate-show">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
Why is this happening, and what can be done to achive animation on the <tr> with data-ng-repeat-end attribute?

Resources