Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

One way binding in angularjs 1.4

Tags:

angularjs

According to Exploring Angular 1.3: One time bindings;

Using new syntax is as easy as starting an expression with ::. So if we apply the one-time expression to our example above, we change this:

<p>Hello {{name}}!</p>

To this

<p>Hello {{::name}}!</p>

and it is now one way binding.

But how can we create a one time binding when using angular directives such as ng-class? I tried the following, but it did not work:

ng-model="::name"
ng-class="['label',{'label-danger': 'High' == ::tsk.Priority}]:
like image 829
Killer Avatar asked May 27 '15 08:05

Killer


People also ask

What is one-way binding in AngularJS?

The one-way data binding is an approach where a value is taken from the data model and inserted into an HTML element. There is no way to update model from view. It is used in classical template systems. These systems bind data in only one direction.

Does AngularJS use one-way data binding?

Data Binding is a way to synchronize the data between the model and view components automatically. AngularJS implements data-binding that treats the model as the single-source-of-truth in your application & for all the time, the view is a projection of the model. Unlike React, angular supports two-way binding.

What is one-way and two way binding in AngularJS?

Difference between One-way & Two-way Binding This means that the flow of code is from ts file to Html file as well as from Html file to ts file. In order to achieve one-way binding, we used the property binding concept in Angular. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.

What is oneway binding?

One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data.


1 Answers

Got my answer here http://toddmotto.com/angular-one-time-binding-syntax/

{{ ::vm.user }}

<div ng-if="::vm.user.loggedIn"></div>

<div ng-class="::{ loggedIn: vm.user.loggedIn }"></div>

<ul>
  <li ng-repeat="user in ::vm.users"></li>
</ul>

Thanks to downvoters.

like image 57
Killer Avatar answered Jan 04 '23 10:01

Killer