Automatically set checkbox to true based on an integer

Question

Hi I need to convert or use the sent integer value from the checkboxes at the reserve page to the view/print transaction page.

Please see my old question: How to add IDs of a checkbox in angular js

I am able to get the values from the database and display it on the view page the only problem is that the checkboxes are null. There are 5 checkboxes on the reservation page (Laptop, Headset, Projector, Tablet, Speakers) so the possible combinations are 32 that's why i used to send an integer from 0 - 31 to the database because there's only one column for the reserved items.

I have successfully manage (with the help of this community) to post and get values from the database.

Now please help me to convert/use that INT value to automatically set the checkbox value to true if it was checked by the user on the reserve page.

Example:

Laptop = 1; Headset = 2; Projector = 4; Tablet = 8; Speakers = 16

The user checks (reserve page)

✓ Laptop, Headset, ✓ Projector, Tablet, ✓ Speakers

The value on the DB: 21

One the view/print page

I need to use the int value on the DB (which is 21) to automatically check the checkbox ✓ Laptop, Headset, ✓ Projector, Tablet, ✓ Speakers in read-only disabled mode .

So far this is my code in html and controller:

function getReservedRequestsById(reservedRequestId) {

            var key = reservedRequestId;

            return dataservice.getReservedRequests(key).then(function (data) {
                vm.ReservedRequestId = data.data;
                console.log(vm.ReservedRequestId);
                logger.info('ACTIVATED');


                //CheckBox
                if (vm.ReservedRequestId.Items > 15) {
                    $scope.chkItems.forEach(function (Item) {
                    if (Item.id == 16) {
                        Item.value = true;
                    }
                })   
               }

                else if ((16 > vm.ReservedRequestId.Items > 7) || (32 > vm.ReservedRequestId.Items > 23)) {
                    $scope.chkItems.forEach(function (Item) {
                    if (Item.id == 8) {
                        Item.value = true;
                    }
                })   
    	       }

		else if ((8 > vm.ReservedRequestId.Items > 3) || (16 > vm.ReservedRequestId.Items > 11) || (24 > vm.ReservedRequestId.Items > 19) || (32 > vm.ReservedRequestId.Items > 27)) {
                    $scope.chkItems.forEach(function (Item) {
                    if (Item.id == 4) {
                        Item.value = true;
                    }
                })   
    	       }

    // AND also for 1 & 2 i did not put it here because i would like to just test if it is working  on the three check boxes. If it is working i'll just add the other two
              
}

<md-input-container class="md-block" flex-gt-sm>
<label class="force-input-label">Items</label>
</br>
<div ng-repeat="chkItem in chkItems">
<md-checkbox name="chkItem.name" ng-model="chkItem.value" readonly>{{chkItem.name}}
</div>
</md-input-container>

it is not currently working

Need help and advice

Not good in english as well as in angularjs/web development : )

your help is greatly appreciated!

Weedoze · Accepted Answer · 2017-02-07 08:44:44Z

1

I fixed your code. I only kept the logic you provided. The problem was that 16 > x > 7 is not a correct syntax in javascript. You have to use &&.

//Laptop = 1; Headset = 2; Projector = 4; Tablet = 8; Speakers = 16
var chkItems = [{
  id: 1,
  name: 'Laptop',
  value: null,
}, {
  id: 2,
  name: 'Headset',
  value: null
}, {
  id: 4,
  name: 'Projector',
  value: null
}, {
  id: 8,
  name: 'Tablet',
  value: null
}, {
  id: 16,
  name: 'Speakers',
  value: null
}];

var items = 21;

if (items >= 16) {
  selectItem(16);
}

if ((items < 16 && items > 7) || (items < 32 && items > 23)) {
  selectItem(8);
}

if ((items < 8 && items > 3) || (items < 16 && items > 11) || (items < 24 && items > 19) || (items < 32 && items > 27)) {
  selectItem(4);
}

console.log(chkItems);

function selectItem(id) {
  chkItems.map(function(elem) {
    if (!elem.value)
      elem.value = (elem.id === id);
    return elem;
  });
}

edited Feb 7, 2017 at 8:44

answered Feb 7, 2017 at 8:11

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BoogerT Over a year ago

Thanks for the quick answer. I'll try it

BoogerT Over a year ago

Thank You! the logic works but the problem still exist due to my wrong codes regarding the loop. Im getting an foreach error

Weedoze Over a year ago

@BoogerT I updated my answer. Now it will set the value of the item to true. You have to call function selectItem() with the id to select in parameter

BoogerT Over a year ago

Your great! I will do a reasearch on your answer especially on how to use map! Working based on sample testing. Will put this code on the original solution hope that it will work THANKS!!!

Collectives™ on Stack Overflow

Automatically set checkbox to true based on an integer

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related