User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper Binding in AngularJS

AngularJS has two types of binding

a.)    One way binding

b.)    Two way  binding

In AngularJS different way to bind value in view:

1.)    Ng-model

2.)    Ng-bind

3.)    {{}}

Syntax:         

1.)  ngModel:

1: 


2: Update value to check transitions when valid/invalid.
3: Integer is a valid value.
4:


5:

6:
7:

The ngModel directive mostly binds with an input,select, textarea (or custom form control) to a property on the scope.

This directive executes at top priority.

 

 

2.)  ngBind:

1: 

2:

3: Hello !
4:

 

The ngBind Replace the text content of the specified HTML element with the value with innerHTML.

 

3.)  {{}}:

1: 

2: Model-Data :
3:

{{name}}


4:

 

Now we will talk about types of binding. When we talk about two way binding it means when we update any model in application that will sync reflated in other parts of application. For example

1: Name:  
2:

When we use this syntax in our application, after that when we input any value in textbox that will appear in below paragraph. It will help with $watchers and $digest.

So ng-model and {{}} syntax used for two-way binding in AbgulaJS.

 

One-way binding is very simple, from the docs: One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value.

when we declare a value such as one-way inside the DOM, once this value becomes defined, Angular will render it, unbind it from the watchers and thus reduce the volume of bindings inside the $digest loop. Simple!

 

When we required this?

For an example I worked on AngularJS application and I needed to make a report section where huge amount of data render in html page. That need only one time binding because that value will be never changed but  two way binding when $digest cycle run due to huge amount of data HTML page crashed so I needed one-way binding which just unbind that value from watchers and it’s not count under $digest cycle.

 

In AngularJS 1.2 we used ng-bind directive for one way binding. But in 1.3 version AngularJS give you flexibility to use one-way binding with {{}}.

  {{ ::name }} >> this is way to use one way binding

Anything typed into the input wouldn't render the Model value out in the View, consider it a "render-once" type method rather than bind once.

* With ng-if

ng-if="::name">
>> this is way to use one way binding

* With ng-class

ng-class="::{ displayName:UserName }">

* The syntax is simple inside an ng-repeat

      ng-repeat="user in ::userList">


crazydeveloper Home Page 05 May 2015

Become a Fan