AngularJS bindings

by ospatil

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<h3>Binding and computed properties</h3>
<div data-ng-controller="NameCtrl">
    <label for="firstName">First Name:</label>
    <input name="firstName" 
            type="text" 
            data-ng-model="firstName" 
            placeholder="Enter first name"/>
    <label for="lastName">Last Name:</label>
    <input name="lastName"
            type="text"
            data-ng-model="lastName"
            placeholder="Enter last name"/>
    <label>Full Name:</label>
    <span class="input uneditable-input">{{fullName()}}</span>
    <a ng-click="anchorClick()">Test Link<span ng-click="spanClick()">span inside link</span></a>
    <h3>Binding Arrays</h3>
    <div data-ng-controller="ArrayCtrl">
        <button class="btn btn-mini" type="submit" data-ng-click="addItem()">Add item</button>    
        <ul>
            <li ng-repeat="item in items">{{item}}</li>
        </ul>
        <div>And since scopes form a hierarchy, ArrayCtrl can access fullName from NameCtrl as its a child of NameCtrl.</div>
        <div>Full Name: <span class="label label-success">{{fullName()}}</span></div>
    </div>
</div>

JavaScript

var demoApp = angular.module('demoApp', []);

function NameCtrl($scope) {
    $scope.firstName = '';
    $scope.lastName = '';

    $scope.fullName = function() {
        return this.firstName + ' ' + this.lastName;
    }
        
    $scope.anchorClick = function() {
        console.log('anchor clicked');
    }
    $scope.spanClick = function(e) {
        e.stopPropagation();
        console.log('span inside anchor clicked');
    }
}
NameCtrl.$inject = ['$scope'];

function ArrayCtrl($scope) {
    $scope.items = [1, 2, 3];
    var counter = 3; 
    
    $scope.addItem = function() {
        this.items.push(++counter);
    }
}
ArrayCtrl.$inject = ['$scope'];