Looping through ng-repeats, extracting checked checkbox values in Angular

Question

Looping through ng-repeats, extracting checked checkbox values in Angular

I am currently dealing with multiple nested ng-repeats in my project, and the third level down consists of a group of checkboxes. Initially, I receive an array of options for these checkboxes, which I handle with the following code snippet:

<div class="fadingOptionsHere" ng-repeat="fading in fade.options">
    <input type="checkbox" ng-model="fadingsHere" value="{{fading.id}}">{{fading.name}}
</div>

My goal is to only retrieve the values of the selected checkboxes. Ideally, I would like to replace the nested options array with an array containing only the selected items, allowing me to send back the JSON object in that format.

Since this is at the third level of nesting, I am facing difficulties in tracking these selections. How can I extract only the selected values (i.e., fading.id) from the checkboxes for each iteration of the ng-repeat loop?

So far, my attempts to reference the fadingsHere model have been unsuccessful.

Any assistance on this matter would be greatly appreciated!

javascript arrays angularjs checkbox

Answer 1

Answer №1

One way to achieve this is by following these steps.

To implement this in HTML, use the code snippet below.

<ul>
    <li data-ng-repeat="record in records">
        <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
    </li>
</ul>

In your controller, make sure to include the selected property.

function MyCtrl($scope) {
 $scope.records = [ { "Id": 1, }, { "Id": 2 }, { "Id": 3 } ];
 $scope.selected = {};
 $scope.ShowSelected = function() {
    return $scope.selected 
};

By accessing the selected property, you can retrieve the list of selected items.

Check out the demo here

Answer 2

One way to achieve this is by following these steps.

To implement this in HTML, use the code snippet below.

<ul>
    <li data-ng-repeat="record in records">
        <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
    </li>
</ul>

In your controller, make sure to include the selected property.

function MyCtrl($scope) {
 $scope.records = [ { "Id": 1, }, { "Id": 2 }, { "Id": 3 } ];
 $scope.selected = {};
 $scope.ShowSelected = function() {
    return $scope.selected 
};

By accessing the selected property, you can retrieve the list of selected items.

Check out the demo here

Answer 3

Answer №2

One way to implement a checklist model directive is by using the following code snippet:

      <input type="checkbox" class="form-control"
                           checklist-model="transaction.jobData[attribute.key]"
                           checklist-value="checkBoxAttributes.code">

Answer 4

One way to implement a checklist model directive is by using the following code snippet:

      <input type="checkbox" class="form-control"
                           checklist-model="transaction.jobData[attribute.key]"
                           checklist-value="checkBoxAttributes.code">

Looping through ng-repeats, extracting checked checkbox values in Angular

Answer №1

Answer №2

Similar questions

Incorporate an HTTP Header into a Wicket Ajax Request

Creating Browser Extensions with Vue.js and Vue CLI

Converting YAML Data From Database Into Array Within Rails Controller

Are the files selected by the user not displaying properly in the URL?

JavaScript encounters an unexpected identifier: Syntax Error

Bizarre String Behavior in jQuery JSON Through Ajax Request

Implementing dynamic loading with a Vue component loader

Tips for referencing a function declared within a prototype

Creating a Matrix-style display of 2D arrays using Python

Tips for redirecting a page in React by forcing a route

Increase the identification of HTML element with jQuery

Unlocking the power of accessing nested data in JSON files dynamically

Unable to assign a variable beyond the scope of a PHP foreach loop

PHP displaying the contents of an array

Learn how to import MarkerClusterer from the React Google Maps library without using the require method

What is the best way to establish anchors for *ngFor elements in Angular 2 and beyond?

What are some techniques for preventing Null Pointer Exception errors?

Has Apache initiated a forced logout process?

Webpack does not support d3-tip in its current configuration

What can be done to ensure that the a href tag is functioning as clickable?