AngularJS - conditional formatting using a filter

Question

I am trying to apply conditional filltering in my html using an Angular filter:

Filter in JS file:

angular.module('myFilter', []).filter('conditionFormat', function () {
    return function (input) {
        return (input 
            ? '<span style="color:#008000; font-weight:bold;">The statement is true</span>' 
            : '<span style="color:#008000; font-weight:bold;">The statement is <span style="color: #FF0000;">NOT</span> true</span>');
    };
});

HTML Code:

<td>
  <span ng-bind-html="{{statement.IsTrue | conditionFormat}}"></span>
</td>

The output of this is literally:

<span style="color:#008000; font-weight:bold;">The statement is true</span>

Is there a way to encode the return string in HTML? or perhaps another way of accomplishing this?

thanks in advance.

Ian Mercer · Accepted Answer · 2013-05-31 05:43:00Z

4

It would be cleaner to do this using CSS classes and ngClass:

<span class="normal">The statement is </span>
<span ng-class="{warn:statement.IsTrue}">{{statement.IsTrue}}</span>

With appropriate definitions for the CSS classes 'normal' and 'warn'.

Alternatively, just use ngShow and ngHide to show one block of HTML and to hide the other. For the most part, in Angular, you manipulate a model and the view renders it using conditional directives; you rarely need to manipulate the HTML directly.

answered May 31, 2013 at 5:43

Ian Mercer

39.4k8 gold badges104 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

noobie · Accepted Answer · 2013-05-31 04:45:17Z

2

ng-switch appears to have worked well.

HTML:

<td>                                      
   <div ng-switch on="statement.IsTrue">
      <div ng-switch-when="true"><span style="color:#008000; font-weight:bold;">The statement is true</span></div>
      <div ng-switch-when="false"><span style="color:#008000; font-weight:bold;">The statement is <span style="color: #FF0000;">NOT</span> true</span></div>
      <div ng-switch-default><span style="color: rgb(255, 0, 0); font-weight: bold;">No answer selected</span></div>
    </div>                                            
</td>

edited May 31, 2013 at 4:45

answered May 31, 2013 at 4:31

noobie

2,6175 gold badges46 silver badges75 bronze badges

Comments

Ye Liu · Accepted Answer · 2013-05-31 05:27:25Z

I think a directive is a better way to achieve what you want, because you need to generate html based on some value, the best use of a filter however is to just format the output.

Here is an example:

JS

angular.module('myDir', []).
  directive('truthful', function() {
    return function(scope, element) {
      function updateUi() {
        if (scope.isTrue) { //NOTE: change to whatever you have in your scope
          element.html('<span style="color:#008000; font-weight:bold;">The statement is true</span>');
        }
        else {
          element.html('<span style="color:#008000; font-weight:bold;">The statement is <span style="color: #FF0000;">NOT</span> true</span>');
        }
      }

      scope.$watch('isTrue', updateUi);
    };
  });

HTML

<span truthful></span>

I have also created a plunk for you to take look.

Collectives™ on Stack Overflow

AngularJS - conditional formatting using a filter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related