2016-06-29 8 views
0

ich das Plugin http://vitalets.github.io/checklist-model/ zum ersten Mal verwenden, und ich brauche das DEMO Beispiel Array von Objekten zu verwenden (Pick-Objekt) und dies ist mein Codealle Kontrollkästchen Überprüfen Sie richtig Prüfliste-Modell

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

Ich versuche, alle Kontrollkästchen zu markieren, aber wenn ich das mache, tun Sie einfach das, was es will.

Der Code dieser Funktion ist

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

, die in der DEMO vorgeschlagen, jemand kann mir helfen, suchen, was falsch ist?

+0

Was meinst du mit "das Plugin nur das tun, was es will"? Im Moment rufen Sie "selectEveryUser (allUsers)" von ng-change an und genau das macht es. – jbrown

Antwort

0

Bitte sehen Sie sich diese SO question an.

Es geht um die Dot-rule. Dies ist erforderlich, damit Ihr Demo funktioniert, sodass die Uhr Ihre Auswahl aktualisiert. Grundsätzlich wird die Uhr nicht für primitive Werte ausgelöst. (Aber es ist besser in der Antwort auf die verknüpfte Frage erklärt.)

Bitte werfen Sie einen Blick auf die Demo unten oder diese 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>

Verwandte Themen