Angular filter that generates html

angularjs, javascript

Solution

You need to use ng-bind-html to render html.

<span ng-bind-html="foo | trueIcon"></span>

That said... that's really not what filters are for. Filters are more for scrubbing data being written to a view, rather than generating elements of the view/DOM itself. You'll probably be better off creating a directive for that:

app.directive('trueIcon', function() {
   return {
      restrict: 'E',
      template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>',
      scope: {
         value: '='
      }
   };
});

<true-icon value="foo"></true-icon>

Problem

I have a small angular filter that insert an (bootstrap) icon in place of a true value. It works but the html is encoded: ``` var conApp = angular.module('conApp', []); conApp.filter('trueIcon', function($filter){ return function(booleanValue){ return booleanValue ? '<i class="icon-ok"></i>' : ''; } }); ``` Do i have to implement another filter to decode the html ? Is there an "angular" way of doing this ?

Original source