AngularJS button 활성/비활성(ng-disabled) 예제

■ 아래 캡쳐 화면의 첫번째 버튼을 클릭하면 두번째 버튼이 활성/비활성 되는 예제. 첫번째 버튼을 클릭(buttonToggle)하면 buttonDisabled값이 true/false로 토글되면서 버튼이 활성 비활성 된다.
 
 
 

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl", function($scope){
       
  $scope.buttonDisabled = true;
  $scope.buttonToggle = function() {
    console.log( "1 > " + $scope.buttonDisabled );
    $scope.buttonDisabled = !$scope.buttonDisabled;
    console.log( "2 > " + $scope.buttonDisabled );
  }
});
</script>
</head>
<body ng-controller="myAppCtrl">
  <h1>AngularJS ng-disabled(button) 예제<br/></h1>
  <button ng-click="buttonToggle()">button enable/disable</button>
  <button ng-disabled="buttonDisabled">button 활성/비활성</button>
</body>
</html>

 
 
 

■ 실행 결과

 
 
 

■ 위의 함수를 이용하지 않고 좀 더 간단한 방법은 아래와 같이 ng-click할 때 buttonToggle 값을 바로 변경한다.

<h1>AngularJS ng-disabled(button) 예제<br/></h1>
<button ng-click="buttonDisabled=!buttonDisabled">button enable/disable</button>
<button ng-disabled="buttonDisabled">button 활성/비활성</button>