mercredi 12 juin 2019

Angularjs: Check / Uncheck checkboxes of categories and list items

I've list of categories and list items which i want to have check/uncheck feature. Where clicking on category should also check all child checkboxes. I have a list (of privileges in JSON) where some items have same category like below;

I have example code in plunkr - https://next.plnkr.co/edit/au1XPEjj7MuP77gc

I've JSON code like below.

var list = [{
      "uuid": "0023",
      "title": "AM_FULL_ACCESS",
      "displayName": "Application monitoring Full access",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Application Monitoring"
    },
    {
      "uuid": "0025",
      "title": "CM_FULL_ACCESS",
      "displayName": "Client management Full access",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Client Management"
    },
    {
      "uuid": "0031",
      "title": "COMPLIANCE_FULL_ACCESS",
      "displayName": "Compliance Full access",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Compliance"
    },
    {
      "uuid": "0054",
      "title": "FAILED_APPLICATION_ACCESS",
      "displayName": "Failed application access",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Compliance"
    },
    {
      "uuid": "0068",
      "title": "FUND_TRANSFER",
      "displayName": "Fund Transfer",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Funds"
    },
    {
      "uuid": "0067",
      "title": "FUND_LOADING",
      "displayName": "Fund Loading",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Funds"
    },
    {
      "uuid": "0066",
      "title": "FUND_LOADING_TRANSFER",
      "displayName": "Fund Loading and transfer",
      "status": "ACTIVE",
      "type": "ADMIN",
      "category": "Funds"
    }
];

To put each list item under specific category I've loop through JSON and filtered it with ng-if directive to show specific list items if has same category.

Here View (HTML Code)

<label>
    <input type="checkbox" id="" ng-model="IsAllChecked" ng-change="CheckUncheckAll()"> 
    <span class="ml-1">Application Monitoring</span>
</label>
<ul class="list-unstyled">
    <li ng-repeat="pr in privilegesList track by $index" ng-if="pr.category === 'Application Monitoring'">
        <label class="control-label">
            <input id="pr.title" type="checkbox" ng-model="pr.isActive" ng-change="CheckUncheckHeader()">
            <span></span>
        </label>
    </li>
</ul>

<label>
    <input type="checkbox" id="" ng-model="IsAllChecked" ng-change="CheckUncheckAll()"> 
    <span class="ml-1">Client Management</span>
</label>
<ul class="list-unstyled">
    <li ng-repeat="pr in privilegesList track by $index" ng-if="pr.category === 'Client Management'">
        <label class="control-label">
            <input id="pr.title" type="checkbox" ng-model="pr.isActive" ng-change="CheckUncheckHeader()">
            <span></span>
        </label>
    </li>
</ul>

<label>
    <input type="checkbox" id="" ng-model="IsAllChecked" ng-change="CheckUncheckAll()"> 
    <span class="ml-1">Compliance</span>
</label>
<ul class="list-unstyled">
    <li ng-repeat="pr in privilegesList track by $index" ng-if="pr.category === 'Compliance'">
        <label class="control-label">
            <input id="pr.title" type="checkbox" ng-model="pr.isActive" ng-change="CheckUncheckHeader()">
            <span></span>
        </label>
    </li>
</ul>

<label>
    <input type="checkbox" id="" ng-model="IsAllChecked" ng-change="CheckUncheckAll()"> 
    <span class="ml-1">Funds</span>
</label>
<ul class="list-unstyled">
    <li ng-repeat="pr in privilegesList track by $index" ng-if="pr.category === 'Funds'">
        <label class="control-label">
            <input id="pr.title" type="checkbox" ng-model="pr.isActive" ng-change="CheckUncheckHeader()">
            <span></span>
        </label>
    </li>
</ul>

Doing it ng-if seems to work fine but i want to do it with something more better solution (if there is any). Also i want to add Check/Uncheck feature to all categories and their respective child items. So if i check any category all child checkboxes will also be checked. And if any/all item checkbox gets unchecked that parent checkbox should be unchecked.

I've following JS code which seems to serves the check/uncheck all. I'm able to do this for specific category but i want to have script that do it for all categories and its sub checkboxes.




Aucun commentaire:

Enregistrer un commentaire