AngularJS — Data Binding

One-Way Binding

<p>{{name}}</p>
<input type="text" value="{{name}}">

Two-Way Binding

<input ng-model="name">
<p>Hello, {{name}}!</p>

ng-model Usage

<!-- Text input -->
<input ng-model="user.name">

<!-- Checkbox -->
<input type="checkbox" ng-model="user.active">

<!-- Radio -->
<input type="radio" ng-model="user.gender" value="male"> Male
<input type="radio" ng-model="user.gender" value="female"> Female

<!-- Select -->
<select ng-model="user.country">
  <option value="USA">USA</option>
  <option value="UK">UK</option>
</select>

Binding in Controllers

app.controller('UserController', function($scope) {
  $scope.user = {
    name: 'John',
    email: 'john@example.com'
  };
});

Binding with Expressions

<p>{{user.name | uppercase}}</p>
<p>{{user.name.length}}</p>
<p>{{5 + 5}}</p>

One-Time Binding

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

Mini Practice

1. Implement one-way binding
2. Use ng-model for two-way binding
3. Bind different input types
4. Use one-time binding

Up Next

Continue with Directives — AngularJS directives.