Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I escape curly braces for display on page when using AngularJS?

Tags:

angularjs

I want the user to see double curly braces, but Angular binds them automatically. This is the opposite case of this question where they want to not see curly braces used for binding when the page is loading.

I want the user to see this:

My name is {{person.name}}. 

But Angular replaces {{person.name}} with the value. I thought this might work, but angular still replaces it with the value:

{{person.name}} 

Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

like image 827
Jason Goemaat Avatar asked Jun 01 '13 01:06

Jason Goemaat


People also ask

Do curly braces need to be escaped in regex?

To match literal curly braces, you have to escape them with \ . However, Apex Code uses \ as an escape, too, so you have to "escape the escape". You'll need to do this almost every time you want to use any sort of special characters in your regexp literally, which will happen more frequently than not.

What are the curly brackets {{ }} used for?

Curly brackets are commonly used in programming languages such as C, Java, Perl, and PHP to enclose groups of statements or blocks of code.

What are curly braces in angular?

Interpolation in Angular In simple terms, when you send data from an Angular component to the template using the mustache syntax or what you would call double curly brackets (these: “{{ … }}”) it is called interpolation. You can use it with variables, objects and even functions.

How do you pass curly braces in JSON?

Data is represented in name/value pairs. Curly braces hold objects and each name is followed by ':'(colon), the name/value pairs are separated by , (comma). Square brackets hold arrays and values are separated by ,(comma).


2 Answers

<code ng-non-bindable>{{person.name}}</code> 

Documentation @ ngNonBindable

like image 77
Mike Pugh Avatar answered Oct 13 '22 16:10

Mike Pugh


Edit: adding \ slash between brackets inside the quotes works

{{  "{{ person.name }\}"   }}   

this too .. by passes angular interpreting

{{ person.name }<!---->} 

this too ..

{{ person.name }<x>}   {{ person.name }<!>} 
like image 33
bh_earth0 Avatar answered Oct 13 '22 18:10

bh_earth0