JSFiddle - React, Tailwind, and code Playground

by petjofi

HTML

<div ng-controller="myCtrl">
  <div ng-repeat="item in myArray">
    <input ng-model="item.selected" ng-click="checkItem(item)" type="checkbox" /> {{ item.name }} - {{ item.id }}({{ item.part }})
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, myCollection) {
   $scope.myArray = myCollection.items;
   $scope.checkItem = function(item) {

     myCollection.mapCheckedItems();

     if (item.selected && myCollection.selectedPartsOnly.length > 1) {

       myCollection.selectedPartsOnly.map(part => {
         var map = myCollection.selectedPartsMap[part];
         for (var j = map.length - 1; j > 0; j--) {
           map[j].selected = false;
         }
       })

     }

     myCollection.mapCheckedItems();

   };

 });

 app.service('myCollection', function() {
   var self = {};
   self.mapCheckedItems = mapCheckedItems;
   self.selectedPartsOnly = [];
   self.selectedPartsMap = {};
   self.items = [{
     "id": 77,
     "selected": true,
     "part": 33,
     "name": "16.1",
   }, {
     "id": 76,
     "part": 30,
     "selected": true,
     "name": "14.3",
   }, {
     "id": 71,
     "part": 30,
     "selected": false,
     "name": "14.2",
   }, {
     "id": 70,
     "part": 31,
     "selected": false,
     "name": "15.1",
   }, {
     "id": 69,
     "part": 30,
     "selected": false,
     "name": "14.1",
   }, {
     "id": 68,
     "part": 29,
     "selected": false,
     "name": "13.1",
   }, {
     "id": 55,
     "part": 26,
     "selected": false,
     "name": "12.1",
   }, {
     "id": 54,
     "part": 25,
     "selected": false,
     "name": "11.2",
   }, {
     "id": 53,
     "part": 25,
     "selected": false,
     "name": "11.1",
   }];

   mapCheckedItems();

   return self;

   // Reload objects mapping
   function mapCheckedItems() {
     self.selectedPartsOnly = [];
     self.selectedPartsMap = {};
     self.items
       .filter(item => item.selected)
       .map(item => {
         mapSelectedParts(item);
         mapSelectedPartsOnly(item.part);
       })
   }

   function mapSelectedPartsOnly(part) {
     if (self.selectedPartsOnly.indexOf(part) == -1)
       self.selectedPartsOnly.push(part);
   }

  ...