如何在angularjs中使用逗号分隔符显示行中的变量值

Question

我有四个变量，我想用逗号分隔符连续显示它们的值。我有这样的事情：

{{first}}<span ng-show="first != '' && (second != '' || third != '' || forth != '')">, </span>
{{second}}<span ng-show="second != '' && (third != '' || forth != '')">, </span>
{{third}}<span ng-show="third!= '' && forth != ''">, </span>
{{forth}}

它有效（见jsfiddle）但看起来很糟糕。您是否知道如何以更智能，更优雅或更有用的方式实现这一目标（不添加下一个变量）？

Answer 1

查看array.join函数。您可以向作用域添加一个函数来进行连接，并过滤掉空值。例如：

$scope.joined = function() {
  return [$scope.first, $scope.second, $scope.third, $scope.forth]
    .filter(function(i) { return i; })
    .join(', ');
};

然后在你的标记中：

{{joined()}}

请参阅你的小提琴fork。

请参阅Array.prototype.join()和Array.prototype.filter()的MDN文档。