Question

我第一次使用插件http://vitalets.github.io/checklist-model/，我需要使用DEMO示例对象数组（选择对象），这是我的代码

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

我正在尝试选中所有复选框，但是当我这样做时，插件只是按照自己的意愿行事。

该功能的代码是

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

这是在DEMO中提出的，任何人都可以帮我看看有什么问题吗？

Answer 1

请查看此SO question。

关于Dot-rule。这需要使您的演示工作，以便手表将更新您的选择。基本上，手表不会触发原始值。（但在相关问题的答案中更好地解释了。）

请查看下面的演示或此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': 'jose.amador@pagosonline.com',
      'userName': 'Jose',
      'userLastname': 'Amador Rozo',
      'userLogin': 'jose.amador@pagosonline.com',
      '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': 'jose.amador@pagosonline.com',
      'userName': 'Aose',
      'userLastname': 'Amador Rozo',
      'userLogin': 'jose.amador@pagosonline.com',
      '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': 'jose.amador@pagosonline.com',
      'userName': 'Jose',
      'userLastname': 'Amador Rozo',
      'userLogin': 'Ajose.amador@pagosonline.com',
      '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="angular.js@1.4.x" 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>

正确检查所有复选框清单模型

1 个答案: