How to use Ternary Operator angular.js and html5?

Question

How can I tell to angular to display the html code to display the flag picture only if the variable that contains the name of the flag is not empty. The name of the flag is in column.field of a ng-grid.

The code below doesn't work correctly:

var CellTemplate = '<div>{{row.getProperty(col.field)? "<img ng-src=\'images/country/flag_{{row.getProperty(col.field)}}.gif\' />" : ""}}</div>';

The result is displaying like that: {{row.getProperty(col.field)? "flag picture" : ""}}

Answer 1

您不能将html放在{{}}视图表达式中。这些表达只支持文本。

尝试使用ng-if：

<div ng-if="row.getProperty(col.field)">
      <img ng-src='images/countryflag_{{row.getProperty(col.field)}}.gif' />
</div>