In my angular app, I want to display a value:
<div>{{myValue}}</div>
I also want to make it display "Empty" if the value is empty, like so:
<div>{{myValue || 'Empty'}}</div>
How can I make myValue be formatted normally, but 'Empty' be italicized?
One way would be to use an ng-if to handle the two cases:
HTML Template:
<div ng-if="myValue">{{myValue}}</div>
<div ng-if="!myValue"><i>Empty</i></div> <!-- css here! -->
However, this can be a bit verbose. If you have this occurring again and again, use a filter or bind ng-bind-html from a controller function.
You can use ng-show/ng-hide:
<div ng-show="myValue">{{myValue}}</div>
<div ng-hide="myValue"><i>Empty</i></div>
These directives take "truthy" values and shows/hides according to the passed value.
One angular way , is to use ng-bind-html
<body ng-controller="ngBindHtmlCtrl">
<p ng-bind-html="myValue"></p>
</body>
Within controller, you manage emptyness condition:
app.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
if($scope.myValue == ''){
$scope.myValue = '<i>Empty</i>';
}
}]);
Check this plunker
HTH
ng-bind-htmldirective if you want to add HTML to the output