Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <meta charset="utf-8" />
    <title>JS Bin</title>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <div>
        Select Count:{{count}}<br />
      </div>
      <div>
        Select All:
        <input type="checkbox" ng-model="selectAll" ng-change="changeAll()"> [ {{selectAll}} ]
      </div>
      
      <p ng-repeat="item in checkList">
        <input type="checkbox" ng-model="item.checked" ng-change="changeCurrent(item)">
        {{item.text}} [ {{item.checked}} ]
      </p>
    </div>
  </body>
</html>
​
 
​
 
function Ctrl($scope) {
  $scope.checkList = [
    {
      text: "Anna"
    },
    {
      text: "Don"
    },
    {
      text: "Will"
    },
    {
      text: "Joyce"
    }
  ];
  
  $scope.count = 0;
  
  $scope.changeCurrent = function (current) {
    $scope.count += current.checked ? 1 : -1;
    $scope.selectAll = $scope.count === $scope.checkList.length;
  };
  
  $scope.changeAll = function () {
    angular.forEach($scope.checkList, function (item) {
      item.checked = $scope.selectAll;
    });
    $scope.count = $scope.selectAll ? $scope.checkList.length : 0;
  };
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers