when should I write code with `{{}}` and without `{{}}` in html of angular js project

Question

May be This is a simple question but it is challenging for me.
In angularJS when i write {{}} in html code so i write code like this like if i talk about dynamic id, we write like code this

<div ng-repeat = 'item in itmes track by $index'>
   <div id = "div-{{$index}}">{{item.name}}</div>
</div>

If i use any model without {{}} i write this example

<input id = 'name' ng-model = "item.name"/>

whenever i am coding in angular js, i write code without {{}} then if it is not work then i try code with {{}} and vise versa. and randomly 1 will correct
Question is when i write code with {{}} and without {{}} in html code ?

weirdpanda · Accepted Answer · 2016-01-14T09:27:33.347

3

After the OP explained what exactly was the problem.

So, the question here is very simple: when do we use {{}} and when we don't in the context of ng-model.

When you do a <input type=... ng-model="someModel>, what you're essentially telling Angular is: "Here is an input element; attach $scope's someModel variable to the value of this input element.

Now, you can use this in your JavaScript controller like so: $scope.someModel, but what about HTML? We have a templating language in Angular, and when you give it some variable (say someModel), it'll search its $scope for it, and then put in the value there. If it is unable to, it'll throw a nasty error.

In essence, {{}} GETS the value, without that, you generally set the variable to gold the value of something.

Very simply put, AngularJS thinks that the content within the brace is an expression, which must be resolved. Once it is, Angular puts the value of the resolved expression there. In the most basic of the terms, you just tell it: "Here is some expression; put the evaluated value instead."

In ES6, we call it template strings.

So, you'll use it for expressions which mutate after every iteration. Say, a loop or something. Places where you know what the answer is, or you have static content, you won't use it.

Say you have the following bit of code:

...
...
$scope.figureOne = 10;

in your controller.js and the following in its view file:

<div>My age is {{ figureOne }}</div>

Angular gets the value from the $scope, and puts it there; so, the rendered form will be: My age is 10. However, if you had the following

<div>My age is figureOne</div>

This time, Angular knows that there is nothing to evaluate or resolve, so, it'll just render it as it is: My age is figureOne.

I hope I made it clear! :)

edited Jan 14 '16 at 09:27

answered Jan 13 '16 at 13:21

weirdpanda

2,521
1
20
31

as i see your updated anser may be you dont understand my question. my english is poor, my question is when i write {{}} in attributes value like $index i gave exam. i am not ask for particular $index. – Vipin Jain Jan 13 '16 at 13:51
You mean: `{{$index}}` vs `$index`? – weirdpanda Jan 13 '16 at 13:53
no, this is just example we use inside ng-repeat we assign `id = '{{$index}}'` in html – Vipin Jain Jan 13 '16 at 13:55
question is how i decide in attribute value its come with `{{}}` and without `{{}}` – Vipin Jain Jan 13 '16 at 13:57
Ohh!! That's exactly what I have explained. – weirdpanda Jan 13 '16 at 13:58
1

@VipinJain I think the rule is you don't use `{{}}`in ng-* attributes. You do use them in regular attributes – martskins Jan 13 '16 at 14:23
@weirdpanda thank you for giving your precious time. but till now i have not to understand it, may be you did not understand my question – Vipin Jain Jan 14 '16 at 05:25
Hey Vipin, let's move this discussion to the chatroom: https://chat.stackoverflow.com/rooms/100639/room-for-weirdpanda-and-vipin-jain – weirdpanda Jan 14 '16 at 07:35

score 1 · Answer 2 · answered Jan 13 '16 at 15:03

Angular directives have different types of parameters. Some parameters (@) expect string values and some expect javascript expressions (=) (with variables bound to $scope).

There's no obvious way to know which parameter expects what type of value (aside from looking at documentation).

If a variable expects static string value and you have an angular expression
- then you'll need to evaluate it by wrapping in {{}}
If there variable expects an expression and you have an expression
- simply type that in.

score 0 · Answer 3 · edited May 23 '17 at 12:24

It's the best to avoid using {{}} where possible, your dynamic ID will fail when Angular hasn't interpolated the expression yet, use ng-attr-id="div-{{$index}} for that. https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

Another example, if you have a slow connection and Angular isn't loaded yet users will see the {{}}, you can avoid this by using ng-bind="".

See this thread for more info: AngularJS : Why ng-bind is better than {{}} in angular?

Parshwa Shah · Answer 4 · 2016-01-13T14:15:17.820

It is very simple.

{{something}} - used for one way binding(Static).

<input type="text" value="{{something}}">

Now if you change its value in HTML ,you can not get it by $scope.something in js.

but If you use ng-model="something",you can get its value in JS. This happens because ng-model is two way binding.

<input type="text" ng-model="something">

Mostly We use ng-model for forms and {{}} to display static information like User details or else.

when should I write code with `{{}}` and without `{{}}` in html of angular js project

4 Answers4