Question

在我的角应用程序中，我想显示一个值：

<div>{{myValue}}</div>

如果值为空，我还想让它显示为“空”，如下所示：

<div>{{myValue || 'Empty'}}</div>

如何正常格式化myValue，但是'Empty'是斜体？

Answer 1

一种方法是使用ng-if来处理这两种情况：

HTML模板：

<div ng-if="myValue">{{myValue}}</div>
<div ng-if="!myValue"><i>Empty</i></div>  <!-- css here! -->

然而，这可能有点冗长。如果您反复出现这种情况，请使用控制器功能中的filter或绑定ng-bind-html。

Answer 2

您可以使用ng-show / ng-hide：

<div ng-show="myValue">{{myValue}}</div>
<div ng-hide="myValue"><i>Empty</i></div>

这些指令采用“truthy”值并根据传递的值显示/隐藏。

Answer 3

一种有角度的方式，就是使用ng-bind-html

  <body ng-controller="ngBindHtmlCtrl">
    <p ng-bind-html="myValue"></p>
  </body>

在控制器中，您可以管理空白条件：

app.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  if($scope.myValue == ''){
    $scope.myValue = '<i>Empty</i>';
  }
}]);

选中此plunker

HTH

在角度表达式中格式化字符串

3 个答案: