Check all checkboxes correctly Checklist-model

Question

I'm using for the first time the plugin http://vitalets.github.io/checklist-model/ and I need to use the DEMO example Array of objects (pick object) and this is my code

http://plnkr.co/edit/f4bN2zc2wZzb3DbJvGqZ?p=preview

I'm trying to select all the checkboxes but when I do that the plugin just do what it wants.

The code of that feature is

$scope.selectedUsers = angular.copy($scope.users);

That is proposed in the DEMO, Can anybody help me looking what is wrong?

Answer 1

Please have a look at this SO question.

It's about the Dot-rule. That's needed to make your demo work, so that the watch will update your selection. Basically the watch won't trigger for primitive values. (But it's better explained in the answer to the linked question.)

Please have a look at the demo below or this plunkr.

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

app.controller('MainCtrl', function($scope) {
  var that = this;
  $scope.users = [
    //<editor-fold defaultstate="collapsed" desc="Users Mock">
    {
      'userId': 500089,
      'merchantId': 1,
      'userType': 'EMPLOYEE',
      'userEmail': '[email protected]',
      'userName': 'Jose',
      'userLastname': 'Amador Rozo',
      'userLogin': '[email protected]',
      'userState': 'BLOCKED',
      'accountsAndProfiles': [{
        'account': {
          'accountId': 123123123,
          'merchantId': null,
          'accountName': 'ASD',
          'accountDescription': null,
          'country': 'CO',
          'currency': null,
          'commercialName': null,
          'paymentModel': null,
          'city': null,
          'logoUrl': null,
          'document': null,
          'documentType': null,
          'creationDate': null,
          'accountType': null,
          'localOperation': false,
          'accountState': null,
          'testMode': false,
          'acceptInternationalTransactions': false,
          'thousandSeparator': null,
          'decimalSeparator': null,
          'leftSign': null,
          'symbol': null,
          'balance': 0,
          'description': null
        },
        'profile': {
          'id': 222,
          'name': null,
          'keyName': 'ADMIN_PROFILE',
          'isDefault': true
        }
      }, {
        'account': {
          'accountId': null,
          'merchantId': null,
          'accountName': null,
          'accountDescription': null,
          'country': 'MX',
          'currency': null,
          'commercialName': null,
          'paymentModel': null,
          'city': null,
          'logoUrl': null,
          'document': null,
          'documentType': null,
          'creationDate': null,
          'accountType': null,
          'localOperation': false,
          'accountState': null,
          'testMode': false,
          'acceptInternationalTransactions': false,
          'thousandSeparator': null,
          'decimalSeparator': null,
          'leftSign': null,
          'symbol': null,
          'balance': 0,
          'description': null
        },
        'profile': {
          'id': 20134728913,
          'name': 'profile4',
          'keyName': null,
          'isDefault': false
        }
      }]
    }, {
      'userId': 500090,
      'merchantId': 1,
      'userType': 'EMPLOYEE',
      'userEmail': '[email protected]',
      'userName': 'Aose',
      'userLastname': 'Amador Rozo',
      'userLogin': '[email protected]',
      'userState': 'ACTIVE',
      'accountsAndProfiles': [{
        'account': {
          'accountId': null,
          'merchantId': null,
          'accountName': null,
          'accountDescription': null,
          'country': null,
          'currency': null,
          'commercialName': null,
          'paymentModel': null,
          'city': null,
          'logoUrl': null,
          'document': null,
          'documentType': null,
          'creationDate': null,
          'accountType': null,
          'localOperation': false,
          'accountState': null,
          'testMode': false,
          'acceptInternationalTransactions': false,
          'thousandSeparator': null,
          'decimalSeparator': null,
          'leftSign': null,
          'symbol': null,
          'balance': 0,
          'description': null
        },
        'profile': {
          'id': 20134728913,
          'name': 'profile4',
          'keyName': null,
          'isDefault': false
        }
      }]
    }, {
      'userId': 500091,
      'merchantId': 1,
      'userType': 'EMPLOYEE',
      'userEmail': '[email protected]',
      'userName': 'Jose',
      'userLastname': 'Amador Rozo',
      'userLogin': '[email protected]',
      'userState': 'INACTIVE',
      'accountsAndProfiles': [{
        'account': {
          'accountId': null,
          'merchantId': null,
          'accountName': 'ASD',
          'accountDescription': null,
          'country': 'CO',
          'currency': null,
          'commercialName': null,
          'paymentModel': null,
          'city': null,
          'logoUrl': null,
          'document': null,
          'documentType': null,
          'creationDate': null,
          'accountType': null,
          'localOperation': false,
          'accountState': null,
          'testMode': false,
          'acceptInternationalTransactions': false,
          'thousandSeparator': null,
          'decimalSeparator': null,
          'leftSign': null,
          'symbol': null,
          'balance': 0,
          'description': null
        },
        'profile': {
          'id': 222,
          'name': null,
          'keyName': 'ADMIN_PROFILE',
          'isDefault': true
        }
      }, {
        'account': {
          'accountId': null,
          'merchantId': null,
          'accountName': null,
          'accountDescription': null,
          'country': 'MX',
          'currency': null,
          'commercialName': null,
          'paymentModel': null,
          'city': null,
          'logoUrl': null,
          'document': null,
          'documentType': null,
          'creationDate': null,
          'accountType': null,
          'localOperation': false,
          'accountState': null,
          'testMode': false,
          'acceptInternationalTransactions': false,
          'thousandSeparator': null,
          'decimalSeparator': null,
          'leftSign': null,
          'symbol': null,
          'balance': 0,
          'description': null
        },
        'profile': {
          'id': 20134728913,
          'name': 'profile4',
          'keyName': null,
          'isDefault': false
        }
      }]
    }
    //</editor-fold>
  ];

  $scope.users.selectedUsers = []; //angular.copy($scope.users);
  $scope.usersToEdit = $scope.users.selectedUsers.length;

  $scope.selectEveryUser = function(boolCheck) {
    console.log(boolCheck);
    if (boolCheck) {
      $scope.users.selectedUsers = angular.copy($scope.users);
    } else {
      $scope.users.selectedUsers = [];
    }
  };


});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="https://rawgit.com/vitalets/checklist-model/0.9.0/checklist-model.js"></script>
  <!--<script src="app.js"></script>
  <script src="checklist-model.js"></script>
  -->
</head>

<body ng-controller="MainCtrl">

  <table cellpadding="1" cellspacing="1" class="table table-bordered">
    <thead>
      <tr>
        <th class="theader--check">
          <div class="fancycheck checkbox--table">
            <input type="checkbox" id='allUsers' ng-model='allUsers' ng-change="selectEveryUser(allUsers)" />
            <label for="allUsers"></label>
          </div>
        </th>
        <th class="theader--left">
          <span>name</span>
        </th>
        <th class="theader--left">
          <span>email</span>
        </th>
        <th class="theader--left">
          <span>state</span>
        </th>
        <th class="theader--left">
          <span>account</span>
        </th>
        <th class="theader--left">
          <span>profile</span>
        </th>
      </tr>
    </thead>
    <tbody ng-repeat="(kuser, user) in users" class="table-striped__element" ng-class="{'table-striped__element--active': user.ngActive}">
      <tr ng-repeat="data in user.accountsAndProfiles">
        <td rowspan="{{user.accountsAndProfiles.length}}" ng-if="$index == 0">
          <div class="fancycheck checkbox--table">
            <input type="checkbox" id='{{user.userId}}' data-checklist-model="users.selectedUsers" data-checklist-value="user" />
            <label for="{{user.userId}}"></label>
          </div>
        </td>
        <td rowspan="{{user.accountsAndProfiles.length}}" ng-if="$index == 0">
          {{user.userName}}
        </td>
        <td rowspan="{{user.accountsAndProfiles.length}}" ng-if="$index == 0">
          {{user.userEmail}}
        </td>
        <td rowspan="{{user.accountsAndProfiles.length}}" ng-if="$index == 0">
          <div class="title--normalflag">
            <i class="fa flag tag tag--{{user.userState| lowercase}}" aria-hidden="true"></i>
            {{user.userState}}
          </div>
        </td>
        <td>
          <div class="title--normalflag">
            <div class="inline icon-{{data.account.country| lowercase}}_min img-circle flag"></div>
            <span class="hint--top" aria-label="{{ data.account.accountName}}">
                                    {{data.account.accountId}}
                                </span>
          </div>
        </td>
        <td>
          {{data.profile.keyName}} {{data.profile.name}}
        </td>
      </tr>
    </tbody>
  </table>
  <pre>
  {{users.selectedUsers | json}}  
  </pre>


</body>

</html>