CODEWITHSUNDEEP
javascriptcssangularjs
code-8
code-8

Reputation: 58662

How do I print out an angular expression as a string out on the page?

I have an angular expression {{list}} I don't want angular to execute it - I want to escape it. I want to print them out as HTML code on my page.

  <xmp>
 
    <ul>
      <li ng-repeat="list in lists" class="input">
        {{list}}
      </li>
    </ul>
  
  </xmp>

I kept getting

enter image description here

My Fiddle

What is the best way do something like that ?

Upvotes: 1

Views: 940

Answers (3)

SoEzPz
SoEzPz

Reputation: 15912

<xmp ng-non-bindable>
  <ul>
    <li ng-repeat="list in lists" class="input">{{list}}</li>
  </ul>
</xmp>

Output

Data

lists = ['one','two','three'];

Angular

<ul>
  <li ng-repeat="list in lists" class="input">{{list}}</li>
</ul>

Output

one
two
three

UPDATE

To use HTML syntax...

Here is how StackOverflow does it.

For this piece of HTML

<xmp>
  <ul>
    <li ng-repeat="list in lists" class="input">{{list}}</li>
  </ul>
</xmp>

They use this...

<pre class="default prettyprint prettyprinted">
  <code>
    <span class="tag">&lt;xmp</span>
    <span class="pln"> </span>
    <span class="atn">ng-non-bindable</span>
    <span class="tag">&gt;</span><span class="pln"> </span>
    <span class="tag">&lt;ul&gt;</span><span class="pln"> </span>
    <span class="tag">&lt;li</span>
    <span class="pln"> </span>
    <span class="atn">ng-repeat</span>
    <span class="pun">=</span>
    <span class="atv">"list in lists"</span><span class="pln"> </span>
    <span class="atn">class</span><span class="pun">=</span>
    <span class="atv">"input"</span>
    <span class="tag">&gt;</span>
    <span class="pln">{{list}}</span>
    <span class="tag">&lt;/li&gt;</span>
    <span class="pln"> </span>
    <span class="tag">&lt;/ul&gt;</span>
    <span class="pln"> </span>
    <span class="tag">&lt;/xmp&gt;</span>
  </code>
</pre>

Do something similar but with your own styling. It looks like you will be having static HTML for a lesson of some sorts, but you could just make the rendered text in a string format that gets rendered dynamically with the correct classes using ngClass.

Upvotes: 1

vorillaz
vorillaz

Reputation: 6276

You may escape angular curly braces with multiple ways, using HTML comments, ng-non-bindable tag or even a interrupting HTML element

<div ng-app="" ng-init="lists = ['one','two','three'];">
    echo: {{lists}}</br>
    escape 1: <code ng-non-bindable>{{lists}}</code></br>
    escape 2:{{lists}<!-- -->}</br>
    escape 3:{{lists}<span/>}</br>
</div>

Demo

Keep in mind that you may easily change curly to braces to whatever you want:

var app = angular.module('app')
  .config(['$interpolateProvider', function ($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
}]);

Demo

Upvotes: 1

KreepN
KreepN

Reputation: 8598

Use 'ng-non-bindable' in the element.

Example:

<div ng-non-bindable>This is a {{profile}}</div>

Will simply show:

This is a {{profile}}

Upvotes: 5

Related Questions