I have "item.adjustment". The value of adjustment either can be a positive number or a negative number. Based on the sign of the value, I have to display 'adjustments' in two different columns: Positive, and Negative columns.
below is a sample code for my scenario. Can any one help?
<tr>
<td>Positive</td>
<td>Negative</td>
</tr>
<tr>
<td>{{item.adjustment}}</td>
<td>{{item.adjustment}}</td>
</tr>
Can I do something like this?
<td ng-if="item.adjustment >= 0"/>
<td ng-if="item.adjustment < 0"/>
or any better ways?
ng-if will show/hide the element based on the condition if that is what you want. But if you want to show different style based on positive or negative value then its better to use ng-class.
E.g
<td ng-class="{ positive: item.adjustment >= 0 }/>
<td ng-class="{ negative: item.adjustment < 0 }/>
Then define these classes
.positive {
color: green;
}
.negative {
color: red;
}
You have to display them in seperate columns, but still render both <td>s. What you can do is wrap them in a span, because setting the ng-if on the <td> itself won't render the <td>, which causes the negative adjustments to be also in the first column.
<tr>
<td>Positive</td>
<td>Negative</td>
</tr>
<tr>
<td><span ng-if="item.adjustment >= 0">{{item.adjustment}}</span></td>
<td><span ng-if="item.adjustment < 0">{{item.adjustment}}</span></td>
</tr>
If I understand correctly what you want to do :
your JS
$scope.items = [{adjustment:1},
{adjustment:0.3},
{adjustment:-7},
{adjustment:0},
{adjustment:13},
{adjustment:-4},
{adjustment:-0.5}];
your HTML
<tr>
<td>Positive</td>
<td>Negative</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.adjustment >= 0 ? item.adjustment : ''}}</td>
<td>{{item.adjustment < 0 ? item.adjustment : ''}}</td>
</tr>
Assuming, you want to show/hide the text inside td element conditionally, you should add a span inside the td and use ng-if on that. With your approach, only one of the tds will be displayed for any given item in a table row.
<td><span ng-if="item.adjustment >= 0">item.adjustment</span></td>
<td><span ng-if="item.adjustment < 0">item.adjustment</span></td>
See the plunker here which highlights the problem with your approach
Related
I have a table like this :
<tr>
<th scope="row">QUANTITÉ PRODUITE</th>
<td>{{hoursValues[0][0][0]}}</td>
<td>{{hoursValues[0][0][1]}}</td>
<td>{{hoursValues[0][0][2]}}</td>
<td>{{hoursValues[0][0][3]}}</td>
<td>{{hoursValues[0][0][4]}}</td>
<td>{{hoursValues[0][0][5]}}</td>
<td>{{hoursValues[0][0][6]}}</td>
<td>{{hoursValues[0][0][7]}}</td>
</tr>
<tr>
<th scope="row">OBJECTIF QUANTITÉ</th>
<td>{{hoursValues[0][2][0]}}</td>
<td>{{hoursValues[0][2][1]}}</td>
<td>{{hoursValues[0][2][2]}}</td>
<td>{{hoursValues[0][2][3]}}</td>
<td>{{hoursValues[0][2][4]}}</td>
<td>{{hoursValues[0][2][5]}}</td>
<td>{{hoursValues[0][2][6]}}</td>
<td>{{hoursValues[0][2][7]}}</td>
</tr>
I want to compare each column of a row with the other corresponding column, for example : hoursValues[0][0][0] && hoursValues[0][2][0] and according to this comparison, I want to apply the classes.
I mean, if hoursValues[0][0][0] > hoursValues[0][2][0], I want to display the result in green else red.
Can anyone help me ? What should I write in my controller ?
in each td just do this
<td ng-class="{true:'green', false:'red'}[hoursValues[0][0][0] > hoursValues[0][2][0]]">
obvius just change each column with corresponding one.
next td
<td ng-class="{true:'green', false:'red'}[hoursValues[0][0][1] > hoursValues[0][2][1]]">
I need something like this with angularjs and smart table
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed" st-select-row="row">
if {{row.userName}} ==0
<td>male</td>
else
<td>female</td>
</tr>
</tbody>
You don't really need to apply a directive like ng-if if you only want to conditionally display a word/string, angular expressions are also a good choice
{{row.userName === 0 ? 'male' : 'female'}}
You need to use ngIf or ngShow directive.
The example below is using ngIf.
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed" st-select-row="row">
<td ng-if="row.userName === 0">male</td>
<td ng-if="row.userName === 1">female</td>
</tr>
</tbody>
you can make <td ng-show="row.userName == 0">male</td>
<td ng-hide="row.userName == 1">Female</td>
I'm wondering if there is a way to determine the index when processing a ng-repeat.
For example, I only want the first and second indexs to have anchor tags in the following:
<tbody>
<tr ng-repeat="row in rows | orderBy:sort.type:sort.reverse | filter:searchData">
<!-- only want to make the index 0 and 1 have an anchor -->
<td ng-repeat="column in cols">{{row[column]}}</td>
</tr>
</tbody>
I'm thinking something like the following is needed, but I can't figure out (or find) the proper syntax:
<!-- if index == 0 or 1, show anchor -->
<td ng-repeat="column in cols" ng-if="row[$index] <2">{{row[column]}}</td>
<!-- else, if index >= 2, don't show anchor -->
<td ng-repeat="column in cols" ng-if="row[$index] >=2">{{row[column]}}</td>
Here is a fiddle with a base example: https://jsfiddle.net/zp2cqxqb/
Thanks for any assistance with this!
You are interested in the $index itself, rather than the row[$index] value, as you are currently checking.
As a bonus, if you make use of another inline element, such as a span, for the non-anchor value, you can avoid a double ng-repeat statement:
<tr ng-repeat="row in rows | orderBy:sort.type:sort.reverse | filter:searchData">
<!-- only want to make the index 0 and 1 have an anchor -->
<td ng-repeat="column in cols">
<a ng-if="$index < 2" href="#">{{row[column]}}</a>
<span ng-if="$index >= 2">{{row[column]}}</span>
</td>
</tr>
Updated fiddle: https://jsfiddle.net/z87ntjne/
I want to expand/collapse a row, I want to hide all odd rows and on clicking '+' button those hidden row should get visible, my current code is allowing me hide all the odd rows but on clicking '+' button all row are getting visible, my use case is to show only the odd row which is next to clicked even row.
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody ng-repeat="test in ctrl.SearchResults">
<tr ng-if="$even">
<td>
<button ng-click="ctrl.expanded = !ctrl.expanded" expand>
<span ng-bind="ctrl.expanded ? '-' : '+'"></span>
</button></td>
<td>{{test.apName}}</td>
<td>{{test.type}}</td>
</tr>
<tr ng-show="ctrl.expanded" ng-if="$odd">
<td></td>
<td>{{test.apName}}</td>
<td>{{test.type}}</td>
</tr>
</tbody>
</table>
The reason all the rows expand when you hit the plus, is that the variable expanded is on the controller. So all the rows are 'listening' to the same variable.
As atfornes pointed out in his answer, you could use the $index to identify each row. Another solution is to keep track of the current index on the controller and check for per row if he must be showed:
<tr ng-show="ctrl.expanded == $index" ng-if="$odd">
And on the click event of the plus sign you could have
ctrl.expanded = $index
Or you could handle this in the controller. In this case you can create a method on the controller which accepts the index and then set this index value to the controller's variable expanded.
At the button ng-click code, you could store the current $index with a code like:
<button ng-click="ctrl.expanded = !ctrl.expanded; ctrl.index = $index" expand>
then, you can change the ng-show condition to only display the item if ctrl.expanded and $index === ctrl.index + 1:
<tr ng-show="ctrl.expanded && $index === ctrl.index +1" ng-if="$odd">
I dont want to show the price if it's value is 0, only show the name and nothing in price then !
If its greater than 0 then it should show both name and price.
How to do that?
<tr>
<td>{{cars.name}}</td>
<td>{{cars.price}}</td>
</tr>
<tr>
<td> {{cars.name}} </td>
<td><div ng-show="cars.price > 0"> {{cars.price}} </div></td>
</tr>
Edit: if ng-show is evaluated to false it will hide the element by applying display:none; to the element style.
you can also use ng-if which will not render the element at all
Use ng-if if you don't want the cell included in the DOM, use ng-show if you want it to be included but not visible.
<tr>
<td>{{cars.name}}</td>
<td ng-if="cars.price > 0">{{cars.price}}</td>
</tr>
If you're worried about HTML validators
<tr>
<td>{{cars.name}}</td>
<td ng-if="cars.price > 0">{{cars.price}}</td>
</tr>
also works.
This will however probably skew your table a bit, since ng-show still uses display:none;. You can fix that by overriding the .ng-hide CSS class that gets assigned to hidden elements and set it to visibility: hidden; instead.