Search code examples
javascriptangularjsfont-awesomeui-selectng-bind-html

Show icon on ng-bind-html when value is false

I need to show a fontawesome icon within the ng-bind-html on the ui-select, based on a boolean value

<span  ng-bind-html="project.IsActive == false && <i class="fa fa-ban" aria-hidden="true"></i> | highlight: $select.search"></span>

of course this code does not work,it's just to explain what i need, any idea on how to do it ?

Solution

  • Ng-bind-html is a directive with should take the trusted html as an argument. So, you should move your logic with wether to show your icon to controller and also make your html trusted by angulars $sce service: 

    let icon = $sce.trustAsHtml('<i class="fa fa-ban" aria-hidden="true"></i>');
$scope.html = !IsActive ? icon : null;

    and then in view you go like:

    <span ng-bind-html="html"></span>

    All these done by angular is to prevent unsafe resources or some xss to be injected to your app.

    Look up this fiddle