关于AngularJS:显示空如果if值为空


Show &nbsp if value empty

如果值为空，我需要在table单元格中显示一个非中断空间。这是我的模板：

1
<td class="licnum">{{participant.LicenseNumber}}</td>

我试过了，但没用：

1
<td class="licnum">{{participant.LicenseNumber} ||"$nbsp;"}</td>

返回null值的问题如下：

enter image description here

如果许可证号带有null值，则单元格为空，行颜色如下。

使用Lucuma的建议，它显示了：

enter image description here

在过滤器中更改if语句后，仍然不显示非null值：

enter image description here

相关讨论

你所拥有的应该是有用的。您缺少一个结束的}，并且在需要删除的表达式中间有一个。

这是一个演示，演示了您的解决方案的工作情况和一个ng if。http://plnkr.co/edit/url7clbi6geqvyzoauahz？P＝信息

一个过滤器可能是要走的路线，但您可以用一个简单的ng if或ng显示(在td上，甚至在跨度上)来完成它：

1
2
<td class="licnum" ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</td>
<td class="licnum" ng-if="!participant.LicenseNumber">&nbsp;</td>

或

1
<td class="licnum"><span ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</span><span ng-if="!participant.LicenseNumber">&nbsp;</span></td>

我将此作为不需要向控制器/过滤器添加代码的替代解决方案提供。

您可以阅读一些关于这个方法的信息：AngularJS模板中的if-else语句

相关讨论

1
2
3
4
5
6
7
8
9
angular.module('myApp',[])
    .filter('chkEmpty',function(){
        return function(input){
            if(angular.isString(input) && !(angular.equals(input,null) || angular.equals(input,'')))
                return input;
            else
                return '&nbsp;';
        };
    });

正如@donal所说，为了使这项工作正常进行，您需要使用ngSanitize's指令ng-bind-html，如下所示：

1
<td class="licnum" ng-bind-html="participant.LicenseNumber | chkEmpty"></td>

编辑：

下面是一个简单的例子：http://jsfiddle.net/mikeconroy/tpppb/

相关讨论