CODEWITHSUNDEEP
javascriptangularjs
Nomad
Nomad

Reputation: 1139

replacing null data with string "null" in angular js

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>

enter image description here

Upvotes: 5

Views: 7262

Answers (3)

Lucas
Lucas

Reputation: 10303

Another option is ng-if
 <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">
              <span ng-if="row" >{{ row }} </span>
              <span ng-if="!row" > null </span>
            </td>
        </tr>
    </table>

Upvotes: 0

ste2425
ste2425

Reputation: 4766

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

Upvotes: 1

Raxa
Raxa

Reputation: 382

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>

Upvotes: 4

Related Questions