在角度js中用字符串“null”替换空数据

Question

我必须使用ng-repeat在html页面中显示表格。 表中的大多数条目都有空数据，但我无法用空格或字符串null替换null。我试过{{row || 'null'}}但它没有帮助。当它生成表时，如果行有大量的空值，它会完全混乱。

     <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

旧的ng-show和ng-hide技巧如果值为＆＃39; null＆＃39;如何显示。

替换

{{ row || 'null' }}

与

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

Answer 2

更好的选择是使用过滤器。这意味着没有重复的DOM元素，隐藏和显示的元素。它还使逻辑不在您的视野之内。

另外它使得没有数据＆＃39;在您的应用程序中使用消息标准，因为您可以在几乎所有数据绑定案例中使用它。

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

和你的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/

文档：https://docs.angularjs.org/guide/filter

Answer 3

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>