Angular JS – Binding Attributes & Events

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
</head>
<body>
    <div data-ng-app="" data-ng-controller="myController">
 
        <!--
            I can use the "data-ng-disabled" directive
            to bind the abilitation of a control
            -->
        <h3>Binding abilitation</h3>
        <button data-ng-disabled="buttonDisabled">Click Me!</button>
        <p>
            Button disabled:
            <input type="checkbox" data-ng-model="buttonDisabled" />
        </p>
        <hr />
 
        <!--
            I can use the "data-ng-show" directive
            to bind the abilitation of a control
            -->
        <h3>Binding visibility</h3>
        <button data-ng-disabled="buttonDisabled" data-ng-show="buttonShowed">Click Me!</button>
        <p>
            Button showed:
            <input type="checkbox" data-ng-model="buttonShowed" />
            Button disabled:
            <input type="checkbox" data-ng-model="buttonDisabled" />
        </p>
        <hr />
 
        <!--
            I can handle an event to make some operation in
            the model with the "data-ng-click" directive
            -->
        <h3>Event handling</h3>
        <button data-ng-click="count = count + 1">Click me!</button>
        <p>You clicked {{ count }} times</p>
        <hr />
 
        <!--
            I can handle an event from the controller
            -->
        <h3>Event handling from controller</h3>
        <button data-ng-click="countIncrement()">Click me!</button>
        <button data-ng-click="toggleAbilitation()">Toggle abilitation</button>
        <p>You clicked {{ count }} times</p>
    </div>
 
    <script>
        function myController($scope) {
            $scope.buttonDisabled = true;
            $scope.buttonShowed = true;
            $scope.count = 0;
 
            //These are event handlers
            $scope.countIncrement = function () {
                $scope.count++;
            };
            $scope.toggleAbilitation = function () {
                $scope.buttonDisabled = !$scope.buttonDisabled;
            }
        }
    </script>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s