Angular JS Magazine

sâmbătă, 23 august 2014

The Data Binding Directives

One of the most used category of built-in directives is the data binding category. Here we have the following directives:

ng-bind                - Binds the innerText property of an HTML element.
ng-bind-html         - Creates data bindings using the innerHTML property of an HTML element. Be carefully with this!
ng-bind-template - Binds for multiple template expressions to be specified in the attribute value.
ng-model              - This is known as the two-way data binding.
ng-non-bindable   - Declares a part of content for which data binding will not be accomplished.

Example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="atp=[
     { name: 'Nadal, Rafael (ESP)', rank: 1 },
     { name: 'Djokovic, Novak (SRB)', rank: 2 },
     { name: 'Federer, Roger (SUI)', rank: 3 },
     { name: 'Wawrinka, Stan (SUI)', rank: 4 },
     { name: 'Ferrer, David (ESP)', rank: 5 }]">

    <p>The number one in ATP is: {{ atp[0].name }}</p>
    <p>The number one in ATP is: <span ng-bind="atp[0].name"></span></p>
    <p>The number one in ATP is: <span ng-bind-template="Name: {{atp[0].name}}"></span></p>
    <p>The number one in ATP is: <span ng-non-bindable="{{atp[0].name}}"></span></p>
</div>
</body>
</html>

Output:

The number one in ATP is: Nadal, Rafael (ESP)
The number one in ATP is: Nadal, Rafael (ESP)
The number one in ATP is: Name: Nadal, Rafael (ESP)
The number one in ATP is: