Determine in AngularJS whether there is a checked checkbox in a table row

Here is my HTML code snippet:

<tbody ng-repeat="notification in notifications">
    <tr>
        <td rowspan="{{notification.specs.length+1}}">{{notification.notification_id}}</td>
    </tr>
    <tr ng-repeat="position in notification.specs">
        <td>{{position.lot}}</td>
        <td>{{position.id}}</td>
        <td>{{position.kind}}</td>
        <td>{{position.name}}</td>
        <td>{{position.release_form}}</td>
        <td>{{position.mnn}}</td>
        <td>{{position.tn}}</td>
        <td>{{position.metric}}</td>
        <td>{{position.price}}</td>
        <td>{{position.count}}</td>
        <td>{{position.full_character}}</td>
        <td>{{position.package_count}}</td>
        <td>{{position.who_checked}}</td>
        <td><input type="checkbox" ng-init="position.is_checked = false" ng-model="position.is_checked"></td>
        <td style="text-align:center" ><i class="icon-folder-open"></i></td>
    </tr>
</tbody>

I am trying to figure out a way to determine if any of the checkboxes in the table are checked. If at least one checkbox is selected, I want to display a special block. However, if none of the checkboxes are selected, I need to hide the block.

UPDATE

When retrieving data from the server, the model does not include the field is_checked. Is there any Angular method that allows me to manually add a field to the model?

Answer №1

Implement a custom isChecked function in your controller, and then bind it to your view.

Controller:

 $scope.isChecked = function(notifications) {
        for (var i = 0; i < notifications.length; ++i) {
        {
            var specs = notifications[i].specs;
            for (var j = 0; j < specs.length; ++j) {
                if (specs[j].is_checked)
                    return true;
            }
        }
        return false;
 };

HTML:

<div ng-show="isChecked()"> Special </div>

Answer №2

Here is a solution that should do the job:

MyApp.controller('MyCtrl', ['$scope', 'filterFilter',
    function ($scope, filterFilter) {
        $scope.isSelected = function(items) {
            var selectedItems = filterFilter(items, {is_selected: true});
            return !!selectedItems.length;
        };
    }
]);

Now you can utilize the isSelected function in your template.

Answer №3

Not tested yet but should be functional

<tbody ng-repeat="notification in notifications">
    <tr>
        <td rowspan="{{notification.specs.length+1}}">{{notification.notification_id}}</td>
    </tr>
    <tr ng-repeat="position in notification.specs">
        {{provisorCtrl.specs = notification.specs}}
        <td>{{position.lot}}</td>
        <td>{{position.id}}</td>
        <td>{{position.kind}}</td>
        <td>{{position.name}}</td>
        <td>{{position.release_form}}</td>
        <td>{{position.mnn}}</td>
        <td>{{position.tn}}</td>
        <td>{{position.metric}}</td>
        <td>{{position.price}}</td>
        <td>{{position.count}}</td>
        <td>{{position.full_character}}</td>
        <td>{{position.package_count}}</td>
        <td>{{position.who_checked}}</td>
        <td><input type="checkbox" ng-init="position.is_checked = false" ng-model="position.is_checked"></td>
        <td style="text-align:center" ><i class="icon-folder-open"></i></td>
    </tr>
</tbody>
<!--added-->
<div id="specialBlock" ng-if="notifications | filter:{'is_checked':true}:true">display if any checkbox is ticked</div>

Alternatively, a more efficient method could be to include an ng-change event on the checkboxes

<td><input type="checkbox" ng-change="boxIsSelected = position.is_checked" ng-model="position.is_checked"></td>

then

<!--added-->
<div id="specialBlock" ng-if="boxIsSelected">display if any checkbox is selected</div>

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

Unlocking the potential: passing designated text values with Javascript

In my current React code, I am retrieving the value from cookies like this: initialTrafficSource: Cookies.get("initialTrafficSource") || null, Mapping for API const body = {Source: formValue.initialTrafficSource} Desired Output: utmcsr=(direct)|utmcmd=(n ...

Setting up of imagemagick node module using linuxbrew

Having trouble installing imagemagick-native as it's showing an error. Tried using the following command to install: npm install imagemaick-native --save > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c45414d ...

What is the best way to generate multiple progress bars by leveraging a for loop?

Exploring the code snippet below, I've been creating a progress bar that reacts to specific data input in array form. However, the issue I've encountered is that the code only generates a single progress bar. How can I incorporate this into my f ...

System CSS modules do not work correctly with Reactjs, CRA, TS, and Carco when using Less

Issues have arisen with the CSS module system in my project. Below are snippets from various code files and configurations: react-app-env.d.ts, craco.config.js, CircleButtonWithMessage.module.less, CircleButtonWithMessage.tsx, as described below: //react-a ...

What is the process for adding JSON data to a dropdown menu using PHP AJAX?

I am trying to populate a select html element with data from a list of JSON results. Here is the code I have attempted: JSON output: jquery loop on Json data using $.each {"Eua":"Eua","Ha'apai":"Ha'apai",& ...

How can I make the columns in Next.js / Tailwind expand horizontally first instead of vertically?

Recently, I decided to customize the Next.js Image Gallery starter for some hands-on experience in full stack development with Next.js. My goal was to create a chronological photo gallery of a recent trip, but encountered an issue where the responsive colu ...

Utilizing Angular to Refine Arrays

I am currently working on filtering an array called courses by a property known as FacilityId. In my controller, I have set up $http calls that return responses for the following: function holeIndexController($scope, $http) { $scope.facilities = []; ...

What is the best MySQL data type for storing JavaScript code with PHP?

I am creating a platform that resembles jsfiddle, allowing users to store their JavaScript codes and retrieve them in an organized manner. I am unsure about which data type would be most suitable for saving the codes, or if storing them in text files wou ...

Using the JSON parameter in C# with MVC 3

I'm facing an issue with sending JSON data from a JavaScript function to a C# method using Ajax. When I receive the data in C#, it's not being recognized as JSON. How can I resolve this issue? If I try to output the received data using Response.W ...

Is there a way to insert a row into a datatable without needing to perform an Ajax reload or using the

When using row.add(…) on a datatable, I encounter an issue where it refreshes via an ajax call when draw() is activated. This leads to the new row not being visible because the data is reloaded from the database. The UX flow behind this scenario is as f ...

Unable to locate the accurate information

Every time I run the cycle, there should be a match with the specified parameters and the message "OK" should appear. However, I am always getting a result of "No". request( { url: 'http://localhost:5000/positions/get', metho ...

Should we be concerned about the ethics of running javascript that is fetched through an AJAX request?

Currently, I am working on updating an existing web application that allows for user administration and login capabilities. One of the features involves modifying a user's details through a dialog box, where the updated data is then sent to the server ...

Experiencing difficulty importing Materialize CSS JS into React

Good day everyone, I've been facing challenges in implementing materialize css into my react-app, specifically with the JavaScript files. After trying various methods, I believe that I have made some progress using the following approach: In my &ap ...

User authentication in MEAN Stack using passport-local and $routeProvider for routing

When it comes to logging users into my application, I am utilizing passport-local. The login process involves a function called in my AngularJS controller: $http.post('/login', $scope.user).then(function (response){ if(response.data.success) ...

Develop a navigation system with forward and backward buttons to easily navigate between

I'm currently delving into angular and striving to implement a next/back button for showcasing various views. Within my repository, I have a template named example.html <h1>{{ message }}</h1> which is utilized by multiple controllers: ...

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in ...

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

I need to implement a confirm modal dialog (UI Kit) when an element is dragged into a new bag using angular 1.4.8 and angular-dragula. If the user clicks ok, the process should continue, but if they click NO, the element should return to its original bag. ...

Passing data from one NodeJS page to another

I am working on creating a User management system in Node. My goal is to have a page that displays all users in a table format. When the edit button is clicked, I want to navigate to another page with detailed information about the selected user. However, ...

Clickable element to change the display length of various lists

I am working on a project where I have lists of checkboxes as filters. Some of these lists are quite long, so I want to be able to toggle them to either a specified length or the full length for better user experience. I have implemented a solution, but th ...

Encountering an illegal invocation error in jQuery

Recently delving into the world of jQuery, I am attempting to call a C# function from JavaScript using AJAX and jQuery. Additionally, I need to pass some parameters while making the call to the C# function. Here is how I am attempting to achieve this: var ...