Display "-" if value is empty?
For this case you can use ngIf like this :
<th ng-repeat=" o in Odds" >
<span ng-if="o.Name">{{o.Name}}</span>
<span ng-if="!o.Name"> - </span>
</th>
Your example should work, but if you have whitespace or a function in o.Name it will not resolve to falsey and you will get an invisible space in the HTML rather than the desired dash.
A generic filter could be used to substitute empty values for dashes and apply various normalisation on the input first:
angular.module('App.filters', []).filter('placeholder', [function () {
return function (text, placeholder) {
// If we're dealing with a function, get the value
if (angular.isFunction(text)) text = text();
// Trim any whitespace and show placeholder if no content
return text.trim() || placeholder;
};
}]);
You can then use it as follows:
<th ng-repeat=" o in Odds" >{{o.Name | placeholder:'-'}}</th>
This is then completely reusable for other rows/columns and anywhere else you want to apply the same rule.
Example: http://jsfiddle.net/kfknbsp7/4/
You could have something using ngIf if this does not work
<th ng-repeat="o in Odds">
<span ng-if="o.Name">{{o.Name}}</span>
<span ng-if="!o.Name">-</span>
</th>
Create notapplicable.pipe.ts
@Pipe({name: 'NA'})
export class Notapplicable implements PipeTransform {
transform(value: string): string {
let newStr: string = "";
if(value=='')
{
newStr="NA";
}
else{
newStr=value;
}
return newStr;
}
}
Include this in app module
import { Notapplicable } from './notapplicable.pipe.ts';
declarations: [
AppComponent,
Notapplicable
],....
And use it this way in the HTML file
<tr *ngFor="let article of articledata">
<td>{{article.a | NA}}</td>
<td>{{article.b | NA}}</td>
<td>{{article.c | NA}}</td>
<td>{{article.d | NA}}</td>
</tr>
This way you can display NA if the string is empty