Angularjs: Установите / снимите флажки категорий и элементов списка - PullRequest
Новая
       20

Angularjs: Установите / снимите флажки категорий и элементов списка

0 голосов
/ 12 июня 2019

У меня есть список категорий и элементов списка, для которых я хочу установить или снять флажок. При нажатии на категорию также должны быть отмечены все дочерние флажки. У меня есть список (привилегий в JSON), где некоторые элементы имеют такую ​​же категорию, как показано ниже;

У меня есть пример кода в plunkr - https://next.plnkr.co/edit/au1XPEjj7MuP77gc

У меня есть код JSON, как показано ниже. 

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"
    }
];

Чтобы поместить каждый элемент списка в определенную категорию, я прошел через JSON и отфильтровал его с помощью директивы ng-if, чтобы показать конкретные элементы списка, если есть такая же категория.

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>{{pr.displayName}}</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>{{pr.displayName}}</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>{{pr.displayName}}</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>{{pr.displayName}}</span>
        </label>
    </li>
</ul>

Делая это, кажется, работает нормально, но я хочу сделать это с помощью более лучшего решения (если оно есть). Кроме того, я хочу добавить функцию проверки / снятия отметки для всех категорий и соответствующих дочерних элементов. Поэтому, если я отмечу какую-либо категорию, все дочерние флажки также будут отмечены. И если флажок какого-либо элемента / всех элементов снят, этот флажок родительского элемента должен быть снят.

Я следую JS-коду, который, кажется, служит для проверки / снятия отметки со всех. Я могу сделать это для конкретной категории, но я хочу иметь скрипт, который делает это для всех категорий и его вложенных флажков.

1 Ответ

0 голосов
/ 12 июня 2019

Может быть, этот скрипт будет полезен. 

angular.module('someApp', [])
  .controller('someController', function someController($scope) {
    $scope.getCategories = getCategories;
    $scope.getPrivilegesByCategory = getPrivilegesByCategory;
    $scope.selectCategory = selectCategory;
    $scope.checkCategory = checkCategory;
    $scope.privileges = getCategories().reduce(
      function(acc, category, index) {
        acc.push({
          category: category,
          data: getPrivilegesByCategory(category)
        });
        return acc;
      }, []);
  });

angular.bootstrap(
  document.body, ['someApp']
);

function getCategories() {
  var categories = privilegesService().reduce(
    function(acc, privilege) {
      if (acc.indexOf(privilege.category) === -1) {
        acc.push(privilege.category);
      }
      return acc;
    }, []);
  return categories;
}

function getPrivilegesByCategory(category) {
  var privileges = privilegesService().filter(
    function(privilege) {
      return privilege.category === category;
    });
  return privileges;
}

function selectCategory(item) {
  checkCategory(item);
  item.data.forEach(function(privilege) {
    privilege.isActive = !item.isActive;
  });
}

function checkCategory(item) {
  var res = item.data.filter(function(privilege) {
    return privilege.isActive !== true;
  });
  item.isActive = res.length === 0;
}

function privilegesService() {
  return [{
      "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"
    }
  ];
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-controller="someController">
  <div ng-repeat="item in privileges">
    <label class="h5 mb-2">
        <input type="checkbox" ng-click="selectCategory(item)" ng-model="item.isActive"> 
        <span class="ml-1" ng-bind="item.category"></span>
    </label>
    <ul class="list-unstyled ml-4">
      <li ng-repeat="pr in item.data track by $index">
        <label class="control-label">
                <input type="checkbox" ng-model="pr.isActive" ng-change="checkCategory(item)">
                <span ng-bind="pr.displayName"></span>
            </label>
      </li>
    </ul>
  </div>
</div>
...