Skip to content Skip to sidebar Skip to footer

How To Check/uncheck All Check Boxes Using AngularJS?

I'm new in AngularJS and trying to achieve check/uncheck all check boxes by clicking 'toggle' button, which is styled by bootstrap. Markup:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<body ng-controller="MainCtrl as vm">
  <div class="container">
    <h3>{{vm.message}}</h3>
<form>
    <button id="toggle" class="btn btn-link btn-mini" ng-click="vm.UpdateCheckboxes()">
      <span ng-show="vm.checkoxesState">   Check all </span>
      <span ng-hide="vm.checkoxesState">   Uncheck All </span>
    </button>


    <div class="row-fluid" ng-repeat="at in vm.actionsQuery.actionTypes">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
      </div>
    </div>
  </form>

  </div>

</body>

</html>

Solution 2:

I have been using this directive for checkboxes. Its simple and it has examples that you need.


Post a Comment for "How To Check/uncheck All Check Boxes Using AngularJS?"