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

Tags:

Angularjs