Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="description" content="Angular Independent checked itens list">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="ctrl">
    
    <a href="#" ng-click="createList(1)">1</a>
    <a href="#" ng-click="createList(21)">2</a>
    <a href="#" ng-click="createList(41)">3</a>
    <ul ng-repeat="it in list">
        <li><input type="checkbox" ng-model='it.checked' ng-click="check(it)"/> {{it.name}}
        </li>
    </ul>
</body>
</html>
 
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.list = [];
  $scope.checked = [];
    
  $scope.check = function(item) {
      var pos = $scope.checked.indexOf(item.id);
      if(item.checked) {
          if(pos < 0) {
            $scope.checked.push(item.id);
          }
      } else {
          if(pos >= 0) {
              $scope.checked.splice(pos, 1);
          }
      }
  };
  
  $scope.createList = function(start) {
      $scope.list = [];
      for(var i = 0; i < 20; i++) {
          var id = i + start;
          $scope.list.push({id: id, name: 'name ' + (i + start), checked: $scope.checked.indexOf(id) >= 0 });
      }
  };
});
Output

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

Dismiss x
public
Bin info
joaozitopolopro
0viewers