Use of brackets in AngularJS

Question

My question might be stupid but I am having a hard time trying to determine whether use {} or {{}} or nothing in my HTML with AngularJS.

I came accross the following : 1/ng-src = "{{ mysource }}" 2/ ng-class = "{ active:tab===2 }" 3/ ng-repeat = "foo in foos"

I think I understand that 3/ is an instruction not a text replacement as in 1/ but why use simple brackets in 2/?

Thanks a lot in advance for your help!

Burger

1. is being used to evaluate expression (one-way binding). you can evaluate Math expressions such as {{2+3}}. 2. Like u mentioned {} is an object literal in Javascript and it's not much different here too. Let's put it this way , in first scenario your trying to evaluate a value and in second your just assigning a string based on condition. — Aj1
– Aj1, Commented Jul 28, 2016 at 15:17

Aurora0001 · Accepted Answer · 2016-07-28 15:14:56Z

1

The curly braces in example 2 are actually being used to create an object literal (see point 2 here) where the keys map to the class name and the values map to the class value. It's exactly the same as the braces used when writing things like this:

var myData = {
    x: 5,
    y: 6
};

The double braces in example 1 are used for AngularJS templates where values are inserted into the HTML by Angular.

Example 3 just uses normal HTML attributes (exactly like <div class="test">).

answered Jul 28, 2016 at 15:14

Aurora0001

13.6k5 gold badges52 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Use of brackets in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related