AngularJS-禁用按钮单击复选框

Question

I have the following scenario: I have a set of checkboxes which are disabled by default. Now, on clicking button 1, I need the checkboxes to be enabled and also show buttons 2 & 3 and hide button 1 at that point.

On clicking on buttons 2 or 3, I need to disable the checkboxes again and show button 1 while hiding buttons 2 & 3.

I am new to AngularJS, and although I have tried with ng-Click and ng-Disabled, I have not managed to achieve what I need. Here is a sample of what I have so far:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <button ng-model="!clicked" ng-show="!clicked">Button 1</button> <button ng-model="clicked" ng-show="clicked">Button 2</button> <button ng-model="clicked" ng-show="clicked">Button 3</button> <div> <input type="checkbox" ng-disabled="clicked">Checkbox 1 <input type="checkbox" ng-disabled="clicked">Checkbox 2 <input type="checkbox" ng-disabled="clicked">Checkbox 3 <input type="checkbox" ng-disabled="clicked">Checkbox 4 <input type="checkbox" ng-disabled="clicked">Checkbox 5 </div> 

Can someone point me to the right direction? Am I missing something?

Answer 1

Please check working example - http://plnkr.co/edit/niAmt0kfJyfAOYeEbVqL?p=preview

HTML

<button ng-show="clicked" ng-click="clicked = !clicked">Button 1</button>
<button ng-show="!clicked" ng-click="clicked = !clicked">Button 2</button>
<button ng-show="!clicked" ng-click="clicked = !clicked">Button 3</button>


<div>
  <input type="checkbox" ng-disabled="clicked">Checkbox 1
  <input type="checkbox" ng-disabled="clicked">Checkbox 2
  <input type="checkbox" ng-disabled="clicked">Checkbox 3
  <input type="checkbox" ng-disabled="clicked">Checkbox 4
  <input type="checkbox" ng-disabled="clicked">Checkbox 5

</div>

Controller

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

app.controller('MainCtrl', function($scope) {
    $scope.clicked = true;
});

Answer 2

Write a controller to handle the buttons and provide the disabled condition for the checkboxes. Controllers should handle the view logic, not the view itself.

Controller (mycontroller.js):

angular.module("myApp")
.controller("MyController", function() {
    var self = this;

    self.checkboxesEnabled = false;

    self.enableBoxes = function() {
        self.checkboxesEnabled = true;
    }

    self.disableBoxes = function() {
        self.checkboxesEnabled = false;
    }
});

Page :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="mycontroller.js"></script>

<div ng-app="myApp" ng-controller="MyController as my">
    <button ng-show="!my.checkboxesEnabled" ng-click="my.enableBoxes">Button 1</button>
    <button ng-show="my.checkboxesEnabled" ng-click="my.disableBoxes">Button 2</button>
    <button ng-show="my.checkboxesEnabled" ng-click="my.disableBoxes">Button 3</button>

    <div>
      <input type="checkbox" ng-disabled="!my.checkboxesEnabled">Checkbox 1
      <input type="checkbox" ng-disabled="!my.checkboxesEnabled">Checkbox 2
      <input type="checkbox" ng-disabled="!my.checkboxesEnabled">Checkbox 3
      <input type="checkbox" ng-disabled="!my.checkboxesEnabled">Checkbox 4
      <input type="checkbox" ng-disabled="!my.checkboxesEnabled">Checkbox 5
    </div>
</div>

Answer 3

page;

<div ng-controller="MyCtrl">
<input    type="checkbox"   ng-disabled="checkMe"    />Toggles
<button ng-click="check()">disable/enable</button></div>

controller

function MyCtrl($scope) {
    $scope.checkMe=false;
    $scope.check = function() {
    $scope.checkMe=!$scope.checkMe;
    }
}

Answer 4

You seem to misunderstand the usage of ng-model. Check out the Angular docs for all the directives, they are quite straight-forward.

Find a working example of what you want here : http://jsfiddle.net/joshdmiller/hb7lu/

<button ng-show="checkboxesDisabled" ng-click="checkboxesDisabled = !checkboxesDisabled">Button 1</button>
<button ng-hide="checkboxesDisabled" ng-click="checkboxesDisabled = !checkboxesDisabled">Button 2</button>
<button ng-hide="checkboxesDisabled" ng-click="checkboxesDisabled = !checkboxesDisabled">Button 3</button>


<div>
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 1
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 2
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 3
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 4
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 5

</div>

Answer 5

Here is a working plunker for your scenario. You do not need to use ng-model on button. It won't do anything there. Plus, IMO checkBoxDisabled as a name makes more sense for the model. There are a couple of more changes that I have done to make it work.

  <button ng-click="vm.toggleDisable()" ng-show="vm.checkBoxDisabled">Button 1</button>
  <button ng-click="vm.toggleDisable()" ng-show="!vm.checkBoxDisabled">Button 2</button>
  <button ng-click="vm.toggleDisable()" ng-show="!vm.checkBoxDisabled">Button 3</button>


  <div>
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 1
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 2
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 3
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 4
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 5

  </div>

Controller:-

angular.module("myApp", [])
.controller('MyController', function() {
  var vm = this;
  vm.checkBoxDisabled = false;
  vm.toggleDisable = function() {
    vm.checkBoxDisabled = !vm.checkBoxDisabled;
  }
})

EDIT: As LionC suggested, you should ideally put your logic in controller. I have updated my answer and plunker accordingly.