Questions tagged [ng-bind]

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes. Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

Source: http://docs.angularjs.org/api/ng.directive:ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferrable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

An alternative solution to this problem would be using the ngCloak directive.

Usage

as attribute

<ANY ng-bind="{expression}">
   ...
</ANY>

as class

<ANY class="ng-bind: {expression};">
   ...
</ANY>
  • Parameters

    ngBind – {expression} – Expression to evaluate.

183 questions
559
votes
8 answers

What's the difference between ng-model and ng-bind

I'm currently learning AngularJS and am having difficulty understanding the difference between ng-bind and ng-model. Can anyone tell me how they differ and when one should be used over the other?
dubs
  • 6,511
  • 4
  • 19
  • 35
410
votes
12 answers

AngularJS : Why ng-bind is better than {{}} in angular?

I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than {{}} binding. One of the reason, ng-bind put the variable in the watch list and only when there is a model change the data get pushed to…
Nair
  • 7,438
  • 10
  • 41
  • 69
62
votes
2 answers

Add more text after using a filter in ng-bind in angularjs

So I want to put a variable through a filter inthe ng-bind directive ng-bind="input | filter" but I want to insert more text ng-bind="input | filter + 'more' " but this isn't working. Is there a way to add more text in ng-bind, like you could if…
laggingreflex
  • 32,948
  • 35
  • 141
  • 196
48
votes
1 answer

Angular.js 1.3 One-time binding in ng-bind

In Angular.js 1.3 I can do a one time binding with: {{::name}} But how may I use this in ng-bind? ng-bind had some performance improvements in comparison to the {{ syntax. Is it supported?
Boas Enkler
  • 12,264
  • 16
  • 69
  • 143
27
votes
8 answers

AngularJS really slow at rendering with about 2000 elements?

Here's the fiddle: http://jsfiddle.net/D5h7H/7/ It renders the following:
{{group.Name}}
Shaddix
  • 5,901
  • 8
  • 45
  • 86
23
votes
2 answers

Difference between ngBind, ngBindHtm & ngBindTemplate in Angular JS

I'm new to Angular JS. Can any one of you guys explain me the difference between ngBind,ngBindHtm & ngBindTemplate in Angular JS with an example?
Syed
  • 2,471
  • 10
  • 49
  • 89
18
votes
3 answers

Set Default Value to ng-bind in HTML

I'd like to set a default value to scope, which is picked up by ng-bind. I am doing this like: In this example, the span is set to innerHTML =…
Kohjah Breese
  • 4,008
  • 6
  • 32
  • 48
18
votes
6 answers

Escaping & > characters in ng-bind in AngularJs

I have a use case, where we can have '&' and '>' characters in a string. eg. Johnson & Johnson, value > 3. So while the response from server is encoded, hence the value becomes 'value &gt; 3'. ng-bind doesn't support the following: value > 3…
DarkKnight
  • 766
  • 1
  • 8
  • 20
16
votes
3 answers

bind multiple values using ng-bind

Can I bind multiple values using ng-bind like so :

Whenever I try this I get the following error: Error: $parse:syntax Syntax Error I know I can do the same using the curly…
Chad Watkins
  • 531
  • 1
  • 8
  • 23
14
votes
3 answers

ng-bind-html doesnt work for Input tags

I am trying to store a HTML inside a scope variable and then use it in template view. When I was reading how to do this in angular, I came across ng-bind-html. In that I've noticed that when I bind html tags with , , etc.. it works. But I…
Neel
  • 9,352
  • 23
  • 87
  • 128
13
votes
2 answers

AngularJS ng-bind with a function

I want to show a table format for the Attachments section. I have the lookup and results data. Both have a common column of attachmentTypeId. I want to show the attachment category description based on the id. In the ng-bind I tried an attempt, it's…
Arulkumar
  • 12,966
  • 14
  • 47
  • 68
12
votes
2 answers

AngularJS - Why is ng-bind faster than expressions?

From this question and this answer, it seems that using expressions will cause the value to be evaluated from scratch every time. But I've searched the documentation and tutorials, and I haven't found a reference for this statement. In my mind, both…
dayuloli
  • 16,205
  • 16
  • 71
  • 126
8
votes
1 answer

Performance of AngularJS binding options

I am wondering about the performance impact of the code variations below as complexity scales. Part of the answer to this (those using properties) has already been addressed in AngularJS : Why ng-bind is better than {{}} in angular? but I would like…
Michael Sorens
  • 35,361
  • 26
  • 116
  • 172
7
votes
4 answers

AngularJS append text to ng-bind with filter

I have this code (output=1,000): But i want something like 1,000 km. Any way to do this without create a new span. Something like this isn't working:
Christopher
  • 3,379
  • 7
  • 25
  • 36
7
votes
1 answer

Default value of input textbox in AngularJS

How do I set the default value of an input textbox in AngularJS so that it can be altered later? I wish to be able to submit the changed value of the textbox(using ng-model) to the server. Would using ng-value to set the initial value of the textbox…
1
2 3
12 13