The initial update of ng-model is not occurring

I am currently working on a checkbox functionality in my project that is bound to an ng-model:

<input type="checkbox" ng-change="toggleAll(globalChecked)" ng-model="globalChecked">

The toggleAll function is responsible for accessing the globalChecked value and performing additional logic in the controller:

$scope.toggleAll = function(val) {
    if ($scope.objects == undefined) {
        return
    }

    for (var i = 0; i < $scope.objects.length; ++i) {
        $scope.objects[i].checked = val;
    }
}

However, I have noticed a issue where clicking the checkbox for the first time triggers the toggleAll function, but the value of 'val' (or globalChecked value) remains false.

I am wondering if there is something that I may have overlooked in this implementation?

javascriptangularjs

Answer №1

It appears that everything is functioning correctly on my end. I have provided a sample plunker for reference:

http://plnkr.co/edit/BbVs7pEEFGTunXVkxCMj?p=preview

If the functionality does not work initially, please ensure to initialize the value of the first checkbox (ng-model="globalChecked" in your code).

  <input type='checkbox' ng-click="checkAll(toplevel)" ng-model="toplevel">
  <div ng-repeat="obj in objects">
    <input type='checkbox' ng-model="obj.checked">
  </div>

$scope.objects = [];

for(var i = 0; i < 100; i++) {
  if (!$scope.objects[i])
    $scope.objects[i] = {checked: false};
}

$scope.checkAll = function(val){
  for(var i = 0; i < 100; i++){
    console.log($scope.objects[i]);
    $scope.objects[i].checked = val;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show a visual content in Grails Server Pages created through a specific class

In my class file, I have the image path displayed as shown below: String val; val+= "<img src=/"PATH_TO_FILE/" alt=/"sometext/">" Now, I am attempting to load the image in a gsp view within a div using jQuery from the val variable. The image is be ...

javascriptjqueryhtmlimagegrails

What is the process for choosing a specific id from a JSON structure?

Is there a way to extract specific data from a JSON format within an Ionic project? What is the process for selecting the ID associated with particular data in a JSON format? And how can I retrieve and display the value linked to the selected product&apos ...

javascriptjsonangulartypescriptionic-framework

Warning happens two times upon performing a right-click

I've got some code that checks the mouse's position, and triggers an alert followed by a redirect if a certain condition is met. It functions correctly, however, I noticed that if you right-click in one area and then left-click in another area t ...

javascriptjqueryhttp-redirectalert

Is requesting transclusion in an Angular directive necessary?

An issue has cropped up below and I'm struggling to figure out the reason behind it. Any suggestions? html, <button ng-click="loadForm()">Load Directive Form</button> <div data-my-form></div> angular, app.directive(&apos ...

javascriptphphtmlangularjsangular-directive

Why aren't the validations being set when creating Angular forms using formControl.values?

I had to structure the form in a specific way in my app.ts file -> courseNameControl = new FormControl("", [Validators.required,Validators.minLength(2)]); contentControl = new FormControl("", Validators.required); form = { cours ...

javascriptangularangular-reactive-forms

Sharing information between a controller and a service in AngularJS

First: Check out this plunk. In my current project, I am working on developing a simple sign-up application using AngularJS that is hosted on a SharePoint site. To retrieve the current user data, I have implemented a factory method as shown below: app.f ...

angularjssharepoint-2013

What is the process for extracting values from a Proxy object and assigning them to a local variable?

Can anyone help guide me on how to retrieve a list of devices (video and input/output audio) using navigator.mediaDevices.enumerateDevices()? I created a function that returns the result, but when I try to display it with console.log(result), I only see a ...

javascriptarraysvue.jsproxy

Steps for regularly executing 'npm run build' on the server

My website doesn't require frequent content updates, as users don't always need the latest information. As a result, most pages are generated server-side and served as static pages. There will be occasional database updates that need to be visib ...

javascriptnext.js

Submitting option values in AngularJS: A step-by-step guide

Why does AngularJS ng-options use label for value instead of just the value itself? Here is my current code: <select ng-model="gameDay" ng-options="gameDay for gameDay in gameDayOptions"> This currently displays: <select ng-model="gameDay" ng- ...

javascriptangularjsformsselectreturn-value

Issue with displaying Git remote repository on list item element (ul) not appearing

My attempt to showcase my GitHub repositories via their API is not displaying on my webpage, even though the exact same code works perfectly fine here on JSFiddle Upon debugging, it seems that the script is being invoked but the content is not loading wit ...

javascriptjqueryajaxhtmlgithub-api

Angular directive does not focus on the text box

I've been working on creating text boxes using a directive and I want only the first text box to be in focus. To achieve this, I am utilizing another directive for focus control. Below is my script: <script> angular.module('MyApp',[]) ...

javascriptangularjs

How can I set individual items in a JSON object to different scope variables in AngularJS?

My JSON object is as follows: const data = {item1: "Hello1", item2: "Hello2", item3: "Hello3", item4: "Hello4", item5: "Hello5"}; I am looking to make each item available in the scope like this: $scope.item1 $scope.item2 ... Can this be done in Angular ...

angularjsangularjs-scopeangular-services

Merge a pair of observables to create a single combined output

Hey there, I'm currently diving into the world of RxJS and reactive programming. One challenge I'm facing is merging two observables. The first observable contains an array of objects called DefectImages[], while the second observable holds an ar ...

javascriptangularrxjsreactive-programming

HTML Error: The result is unspecified

I have written a function that is supposed to return 105; 6.5 and 110; 4.5, but instead it returns undefined: undefinedundefined: undefined. Can someone please advise me on what changes I need to make to get the correct results? I have heard about asynchro ...

javascripthtmlmongodbmeteorundefined

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected. * { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-items: center; position: ...

javascripthtmlcss

Tips for including extra items in a JSON String using Angular 2

function execute(req:any): any { var stReq = JSON.stringify(req); // Adding additional item "Cityname": "angular2City" inside req req.Cityname = 'angular2City'; } Now, how can I include the additional item "Cityname": "angular2C ...

javascriptjsonangular

Comparing strings with if-else statement

I am having trouble comparing strings in this array. For some reason, the strings are never equal. var person = ["Sam", "John", "Mary", "Liz"]; var searchedName = prompt("Enter name"); var resultMessage = ""; for (index in person) { var currentName = ...

javascriptif-statementstring-comparison

Identifying CMYK Images Through Javascript Feature Detection

Many are aware that IE8 does not support CMYK JPG images, as it fails to render them at all. This post discusses the issue further: , among others. My inquiry is as follows: Is there a method to detect from JavaScript, akin to Modernizr, whether a browse ...

javascriptinternet-explorer-8feature-detectioncmyk

Is there a built-in method called router.reload in vue-router?

Upon reviewing this pull request: The addition of a router.reload() method is proposed. This would enable reloading with the current path and triggering the data hook again. However, when attempting to execute the command below from a Vue component: th ...

javascriptnode.jsvue.jsvue-routerreload

Connecting elements within an object using VueJs

Within my object "info_login," I gather account information: async created() { try { const res = await axios.get(inscriptionURL); this.comptes = res.data; this.comptes.forEach(element => { const data = {'pseudo': ...

javascriptapivue.jsauthenticationback