Question

我在HTML中绑定了以下内容。

<div>{{user.address[0].addressline1}}, {{user.address[0].addressline2}}, {{user.address[0].city}}, {{user.address[0].state}}, {{user.address[0].zipcode}}</div>

问题是如果addressline1为null，则首先会不必要地显示,。

还有一些其他字段可以是null

那么如果值不为空，如何显示逗号？

Answer 1

用户将span和ng-show分开，以便仅在user.address[0].addressline1不为空时显示范围

<span ng-show="user.address[0].addressline1">{{user.address[0].addressline1}},</span>
<span ng-show="user.address[0].addressline2">{{user.address[0]. addressline2}},</span>
<span ng-show="user.address[0].city">{{user.address[0].city}},</span>
//...

您可以将任何表达式用于ng-show例如：

user.address[0].addressline1 != null
myObj.myIntAttr > 0 && < 10
myObj.myBoolAttr == false
//...

Answer 2

或者作为风格问题，您可以使用turnery操作员检查值然后格式化

{{ !!user.address[0].addressline1 ? user.address[0].addressline1 + ', ' : ''}}

这可以作为过滤器更直观

angular.module('myapp', []).filter('trailIfTrue', [function(){
     return function(val, trail){
         return !!val ? val + trail : '';
     }
}]);

用法：

{{ user.address[0].addressline1 | trailIfTrue:',' }}

here is a plunker

AngularJS - HTML数据绑定UI问题

2 个答案: