Angular JS Magazine

vineri, 29 august 2014

Disable a Button Using ng-disabled

This tip shows how to disable a button using ng-disabled directive:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("atpModule", [])
                .controller("atpCtrl", function ($scope) {
                    $scope.handleEvent = function (e) {
                        $scope.data = true;
                    }
                });
    </script>
</head>
<body>
<div ng-app="atpModule" ng-controller="atpCtrl">

    <div id="atpPanel" class="panel">
        <h3 class="panel-header">Click button 'One' to disable button 'Two'</h3>
        <button class="btn btn-success" ng-click="handleEvent($event)">One</button>
        <button class="btn btn-success" ng-disabled="data">Two</button>
    </div>
</div>
</body>
</html>

First run:
 After pressing button "One":