Strange actions occurring within the $scope.$watch function

Question

Strange actions occurring within the $scope.$watch function

Below is the code snippet for my $scope.watch function:

$scope.logChecked = []; 
$scope.selectAll = false;
$scope.$watch('selectAll', function(selectAll) {
       console.log($scope.logChecked.length, $scope.logChecked, selectAll);
});

The output of console.log() correctly displays the elements in $scope.logChecked, while $scope.logChecked.length shows 0

0 [pf2n1448: false, cc7a1340: false, cc7a1328: false, pf2n1424: false, if2n1328: false…] true

I am using the following checkbox to update logChecked:

<td><input type="checkbox" ng-model="logChecked[log.batchId]"/></td>

Can anyone help decipher what's happening in this scenario?

javascript angularjs angularjs-scope

Answer 1

Answer №1

The reason for this issue is due to the fact that the variable logChecked is an empty array (hence its length property is 0), but properties were still added to it (since arrays are objects too).

var example = [];

example.name = 'John';

document.write(example.length); // 0

document.write(example.name); // "John"

The tricky part here is that log.batchId is not a number. So, when logChecked[log.batchId] is used, it adds that value as a property of logChecked rather than inside the array.

To fix this issue, you can change logChecked to an object ({}) instead. You can then determine the number of items in that object by using

Object.keys($scope.logChecked).length

Answer 2

The reason for this issue is due to the fact that the variable logChecked is an empty array (hence its length property is 0), but properties were still added to it (since arrays are objects too).

var example = [];

example.name = 'John';

document.write(example.length); // 0

document.write(example.name); // "John"

The tricky part here is that log.batchId is not a number. So, when logChecked[log.batchId] is used, it adds that value as a property of logChecked rather than inside the array.

To fix this issue, you can change logChecked to an object ({}) instead. You can then determine the number of items in that object by using

Object.keys($scope.logChecked).length

Strange actions occurring within the $scope.$watch function

Answer №1

Similar questions

Why do certain servers encounter the "Uncaught SyntaxError: Unexpected token ILLEGAL" error when loading external resources like Google Analytics or fonts from fonts.com?

Is there a way to prevent Accordion propagation once it has been clicked for the first time?

CSS Element Overlapping Issue in Safari Browser

What is the method for executing a specific task using grunt.registerTask()?

Guide to adding table classes to AJAX response tables

Oops! There was an issue trying to solve the command "/bin/bash -ol pipefail -c npm run build" while deploying a Next.js app on Railway. Unfortunately, it did not complete successfully and returned an exit code of

What is the method for adding pages to the ion-nav component in Ionic with Angular?

Having difficulty with Axios due to the URL containing a potent # symbol

Is it possible that bitwise left shifts in JavaScript ES6 (<<) become cyclical after surpassing a shift of 63?

Transferring information to a controller using ajax in ASP.NET Core

What is the proper way to utilize setTimeout in TypeScript?

Unable to place within div

The console is not displaying the data from the useForm

What could be causing the reliability issue with this particular Angular JS code for dropdown menus?

Is there a way to verify the functionality of DigitalOcean features using doctl before transitioning to a live environment?

What is the best way to remove multiple rows from a table using Angular.js?

CodeIgniter session not being updated after AJAX call

Using ReactJS setInterval with Parameters

Saving numerous files with Promises

Utilize user input to fetch data from an external API