replacing null data with string "null" in angular js

Question

I have to display table in html page using ng-repeat. most of the entries in table have null data but i am unable to replace null with either empty space or string null. I tried {{ row || 'null' }} but it didnt help. When it generate table it mess it up completely if rows have large number of nulls.

     <table>
        <tr>
            <th ng-repeat="colname in sqldata.collist">{{colname}}</th>
        </tr>
        <tr ng-repeat="rows in sqldata.tablist">
            <td ng-repeat="row in rows">{{ row || 'null' }}</td>
        </tr>
    </table>

Answer 1

How about the old ng-show and ng-hide trick to show something if a value is 'null'.

Replace

{{ row || 'null' }}

with

<div ng-show="row">{{row}}/div>
<div ng-hide="row">null</div>

Answer 2

A better option would be to use a filter. This means no duplicated DOM elements, a hidden and shown element. It also keeps logic out of your view.

Plus it makes the 'no data' message standard across your application as you can use it in almost all data binding cases.

<div ng-app="test" ng-controller="ClientCtrl">
    <div ng-repeat="elem in elems">
        {{elem | isempty}}
    </div>
</div>

And your JavaScript

angular.module('test', []).filter('isempty', function() {
    return function(input) {
        return isEmpty(input) ? 'No Value' : input;
    };

    function isEmpty (i){
        return (i === null || i === undefined);
    }
})

http://jsfiddle.net/5hqp5wxc/

Docs: https://docs.angularjs.org/guide/filter