ng-disabled + ng-click test

by Yashwanth M

HTML

<div class="well" ng-controller="MyCtrl1">
  <h4>Click me to toggle:
  <input type="checkbox" ng-model="checked">
  </h4>
  <a class="btn btn-primary" ng-disabled="checked" ng-click="handleAnchorClick()">ANCHOR</a>
  <button class="myButton2" ng-disabled="checked" ng-click="handleButtonClick()">BUTTON</button>
  <br/>
  <p>Anchor Clicks: {{anchorClicks}}</p>
  <p>Button Clicks: {{buttonClicks}}</p>    
</div>

<hr />

<div ng-controller="MyCtrl2">
   
<div>
  <label>Click me to toggle:
  <input type="checkbox" ng-model="isChecked"></label>
  <br/>
  <button class="myButton" ng-disabled="isChecked">Toggle Button</button>
  <div tooltip="My Tooltip"  ></div>
</div>

</div>


<hr />

<!-- https://stackoverflow.com/questions/31434307/ng-disabled-active-inactive -->
<div ng-controller="MyCtrl3">

  <button class="myButton2"  ng-repeat="btn in btns" ng-click="disableClick(btn)" ng-disabled="btn.isDisabled">Disable ng-click {{btn.name}}</button>
  
<br /><br />
  <button ng-click="click(1)" ng-disabled="lastClicked == 1">Disable ng-click 1</button>
  <button ng-click="click(2)" ng-disabled="lastClicked == 2">Disable ng-click 2</button>
  <button ng-click="click(3)" ng-disabled="lastClicked == 3">Disable ng-click 3</button>

 <br /><br />
 
  <button class="myButton" ng-click="disabled = 1" ng-disabled="disabled == 1">Disable ng-click 1</button>
  <button class="myButton" ng-click="disabled = 2" ng-disabled="disabled == 2">Disable ng-click 2</button>
  <button class="myButton" ng-click="disabled = 3" ng-disabled="disabled == 3">Disable ng-click 3</button>
</div>

CSS

/* http://jsfiddle.net/krishnathota/xzBaZ/1/
https://stackoverflow.com/questions/14750078/style-disabled-button-with-css
*/

.myButton2 {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

.myButton2:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

.myButton2[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

.myButton2[disabled]:hover {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}
/*    */
.myButton[disabled],
.myButton[disabled]:hover {
  box-shadow: none;
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #504c4c;
  cursor: not-allowed;
}

.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe;
  -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe;
  box-shadow: inset 0px 1px 0px 0px #97c4fe;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6
  ), color-stop(1, #1e62d0));
  background: -moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
  background: -webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
  background: -o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
  background: -ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
  background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6',
    endColorstr='#1e62d0', GradientType=0);
  background-color: #3d94f6;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #337fed;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 4px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #1570cd;
}
.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0
  ), color-stop(1, #3d94f6));
  background:...

JavaScript

//var myApp = angular.module('myApp', ['ui.bootstrap']);

function MyCtrl1($scope) {
    $scope.anchorClicks = 0;
    $scope.buttonClicks = 0;
    $scope.handleAnchorClick = function() {
        $scope.anchorClicks++;
    };
    $scope.handleButtonClick = function() {
        $scope.buttonClicks++;
    };
    
}
// http://jsfiddle.net/695qtssv/3/
function MyCtrl2($scope) {
    $scope.myModel = "Tooltip only works when input is enabled.";
    $scope.isDisabled = false;
    
}

function MyCtrl3($scope) {
  $scope.btns = [
    {name:'1',isDisabled:false},
    {name:'2',isDisabled:false},
    {name:'3',isDisabled:false}
  ];
  $scope.disableClick = function(btn) {
    //alert("Clicked!");
    angular.forEach($scope.btns,function(_btn){
      _btn.isDisabled = false;
    });
    btn.isDisabled = true;
    return false;
  }
  
  $scope.isDisabled = false;
  $scope.click = function(btn) {
    //alert("Clicked!");
    $scope.lastClicked = btn;
    return false;
  }
}