"Upon triggering an event in AngularJS, the data attribute transitions to a state of truth

Question

"Upon triggering an event in AngularJS, the data attribute transitions to a state of truth

Here is the input I am using:

<input type="checkbox" ng-model="area.id" data-id="{{area.id}}"/>

Above this, there is some action with ng-click functionality. My goal is to gather all selected checkboxes' ids. However, after checking them, the value of the data-id attribute changes to true/false. Why does this happen?

The function in the controller looks like this:

collectSelectedAreas($event) {
    let selectedArea = $event.currentTarget.querySelectorAll('input:checked');
    let areaIds = [];

    [selectedArea].forEach((el) => {
        console.log(el.attributes['data-id'].value);
    });
}

javascript angularjs arrays controller attributes

Answer 1

Answer №1

Option 1:

If you wish, you can choose an alternative method to keep track of the checkbox value (true/false). See the code snippet below:

<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}"/>

In this scenario, when the checkbox is selected, area.selected = true

Next, within your function, loop through your array of areas. Let's assume you have an arrayOfAreas, the same array being iterated in your ng-repeat

collectSelectedAreas() {    
    let areaIds = [];

    arrayOfAreas.forEach((el) => {
        if (el.selected){
           areasId.push(el);//Add selected element to array
           console.log(el.id);
        }
    });
}

Option 2:

<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}" ng-true-value="area.id" ng-false-value="'NO'"/>

This setup ensures that when the checkbox is checked, area.selected will hold the value of area.id, otherwise it will be 'NO';

Answer 2

Option 1:

If you wish, you can choose an alternative method to keep track of the checkbox value (true/false). See the code snippet below:

<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}"/>

In this scenario, when the checkbox is selected, area.selected = true

Next, within your function, loop through your array of areas. Let's assume you have an arrayOfAreas, the same array being iterated in your ng-repeat

collectSelectedAreas() {    
    let areaIds = [];

    arrayOfAreas.forEach((el) => {
        if (el.selected){
           areasId.push(el);//Add selected element to array
           console.log(el.id);
        }
    });
}

Option 2:

<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}" ng-true-value="area.id" ng-false-value="'NO'"/>

This setup ensures that when the checkbox is checked, area.selected will hold the value of area.id, otherwise it will be 'NO';

Answer 3

Answer №2

To determine if a checkbox is selected, you do not need to access the DOM. Instead, you can simply check the model value area.id. If the value is true, then the checkbox is selected. You can then navigate through the area object to find the key that identifies the id of the selected checkbox. For example:

<input type="checkbox" ng-model="area.id" />

where

$scope.area.id==true if checkbox is selected.

Answer 4

To determine if a checkbox is selected, you do not need to access the DOM. Instead, you can simply check the model value area.id. If the value is true, then the checkbox is selected. You can then navigate through the area object to find the key that identifies the id of the selected checkbox. For example:

<input type="checkbox" ng-model="area.id" />

where

$scope.area.id==true if checkbox is selected.

"Upon triggering an event in AngularJS, the data attribute transitions to a state of truth

Answer №1

Answer №2

Similar questions

Online Adventure - Saving Conversations

Navigating with relative URLs using RouteProvider in AngularJS

Dynamically retrieving markers from the database based on the most recent timestamp of the last loaded batch

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

Creating separate UI-views using ui-router within a single module

Issues with locating Angular JS Text Area using Selenium Locator

Steps for extracting a portion of the current page's URL

another option besides the nextElementSibling

Is there a way to toggle the slide effect of one 'div' without affecting another one?

Traverse through a collection of objects

Why isn't the onChange function triggering in the input type text when the input is not manually typed in?

The outcome of the function is showcased within the home view blade of the controller in Laravel using PHP

iOS alert notification for navigator

What is the preferred way to handle return values in a JQuery Ajax function - true or

Selecting the appropriate color code based on a specified value

Prevent angular from being executed through a JavaScript function triggered by a button click

New feature in jQuery inputmask enables placeholder text to be retained

Initializing an array with custom types enclosed in curly braces

Navigate back to the previous page following the completion of an AJAX data submission

Comparing the map function and for loop in the Puppeteer package for Node.js