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.
Related
I'm looping through the properties of an object called an observation. One of those properties is ImageUrl. The ImageUrl is not important to the user and it's value is a Base64 image...so it's a mile long. I want to show all properties except the ImageUrl property. I'm trying to use ng-if to exclude it, but it's not working. Any tips? This is an old Angular 1 app at my work and I don't have any authority to upgrade it to Angular 2 or any other framework. I just need this ng-if to work or for someone to suggest an alternative that'd work. Thank you. This is my best try and it's not excluding ImageUrl. I can't get the ng-if to exclude anything.
<table>
<tbody>
<tr ng-repeat="p in properties(obs)">
<th ng-if="p !== 'ImageUrl'">{{p}}:</th>
<td ng-if="p !== 'ImageUrl'">{{obs[p]}}</td>
</tr>
</tbody>
</table>
The syntax would be:
<tr ng-repeat="(key, val) in obs">
<td ng-if="key !== 'ImageUrl'">{{val}}:</td>
<td ng-if="key === 'ImageUrl'">{{key}}</td>
</tr>
That way 'ImageUrl' will be shown in case of the ImageUrl property, else the value of the property.
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
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 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
Within a table cell, I am listing several items that are populated using ng-repeat, using the structure below. However, for some entries, properties such as "user.favcolor" are blank. What's the easiest way to hide text such as "Favorite color:" in that case so that I don't end up with a row that has "Favorite color:" and no value beside it?
<table>
<thead>
<tr>
<th>Price</th>
<th>Plan Contents</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tip in tips">
<td>{{tip.priceMonthly}}</td>
<td><span>Name: {{user.name}}</span>
<span>ID: {{user.id}}</span>
<span>Favorite color: {{user.favcolor}}</span>
</td>
</tr>
</tbody>
</table>
You can use the ng-show directive for this:
<span ng-show="user.favcolor">Favorite color: {{user.favcolor}}</span>
The ng-show works such that the element is only shown if the expression evaluates to true. An empty string here will evaluate to false hiding the entire element.
Alternatively, you can also specify a default value:
<span>Favorite color: {{user.favcolor || "Not specified" }}</span>
In this case, if user.favcolor evaluates to a false, it will print Not specified instead.