Tips for utilizing ng-checked and ng-disabled in conjunction with ng-repeat

I encountered a challenge with ng-repeat while incorporating ng-checked and ng-disable alongside it.

<div ng-repeat="module in modulelist">
<input id="switch{{$index}}" ng-init="setState($index);" type="checkbox" ng-checked="switch.checked" ng-disabled="switch.disable" ng-click="toggle($index, light.name)" />

Using ng-init to retrieve the state of the checkbox module.status from modulelist. The status can be ON, OFF, or unknown. I want to disable the checkbox for 'unknown' status, and check/uncheck it for 'ON/OFF'. I attempted using:

$scope.switch = {checked: true};

However, this property is being applied to all checkboxes. I understand that 'switch.checked'/'switch.disable' should be unique for each checkbox to make individual changes, but I am struggling to achieve this.

Please assist.

javascriptangularjscheckboxangularjs-scope

Answer №1

If you are looking for a solution, this could be exactly what you need. Each module acts as the model for the input, allowing you to apply logic to the attributes.

<div ng-repeat="module in modulelist>
<input id="switch{{$index}}" 
    ng-init="setState($index);" type="checkbox"
    ng-checked="module.status==='ON'"
    ng-disabled="module.status==='unknown'"
    ng-click="toggle($index,light.name)" />

By using this code, you are utilizing the same scope variable for all checkboxes, meaning changing one will alter them all.

$scope.switch={checked:true};

Modification

In reply to the original post's comment, consider implementing something like this:

ng-checked="handleCheckStatus(module.status)"

And then within $scope:

$scope.handleCheckStatus = function(status) {
   switch (status) {
       case 'ON':
           return true;
       break;
       case 'OFF':
           return false;
       break;
       // and so forth
   }
}

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

Retrieve the JSON data from an AJAX request

I am a beginner in the world of AJAX and JavaScript. In one of my projects, I need to retrieve a JSON object in my JavaScript file. I have utilized spray-json library which displays the JSON object at this URL: http://localhost:8081/all-modules { "statu ...

javascriptjqueryajaxjsonspray-json

Looking for a character that includes both lowercase and uppercase letters

Here is the JSON data I have: [ {"lastName":"Noyce","gender":"Male","patientID":19389,"firstName":"Scott","age":"53Y,"}, {"lastName":"noyce724","gender":"Male","patientID":24607,"firstName":"rita","age":"0Y,"} ] var searchBarInput = TextInput.value; var ...

javascriptjson

Regex substitute every instance of the phrase CONTAINED within brackets

I am looking to replace all instances of text within brackets, including the brackets themselves, in a given string. The specific text to be replaced will be stored in a variable in Javascript. Using a simple regex in a replace method won't work due t ...

javascriptregex

"Autodesk Viewer: Unlocking the Power of Programmatic Camera Y-Axis Reversal

I have been utilizing the markups core extension to retrieve and restore the viewer state, which has been successful, except for a problem with inversion (only in 3D). When a client interacts with the y-axis specifically, causing the model to flip to revea ...

javascriptreactjsthree.js3dautodesk-viewer

Difficulty updating Material UI table

Currently in the process of updating my react site to version 16.8, I have encountered an issue with a material ui table. The functionality involves users selecting certain options, triggering a rest call when a button is clicked, and then displaying the r ...

javascriptreactjsmaterial-ui

Assassin eradicated from list of cast members

In my quest to select a killer from the Cast Members Array for the game, I want the function to pick one person as the killer and then remove them from the castMember player array. Once the killer is chosen, they should be removed from the survivors array ...

javascriptarraysfunctionfor-loopvariables

Learn how to execute shell commands on a Linux server from a Node.js application by utilizing Socket.io for establishing a connection. This includes tasks such as running "ls -ltr", changing

After successfully establishing a connection with my Linux server, I aim to execute shell commands for automation purposes such as changing directories and creating new folders. The main objective is to connect to the Linux server through a webpage, wher ...

javascriptnode.jslinuxsocket.io

Facebook has broadened the scope of permissions for canvas applications

I am in the process of developing a Facebook canvas application that requires extended permissions for managing images (creating galleries and uploading images) as well as posting to a user's news feed. I am currently facing challenges with obtaining ...

phpjavascriptfacebook

How can I put a row at full-width in a Material-UI table in React

I need assistance with displaying data in a table using JSX code: const StudentsTable = (props) => { const classes = useStyles(); return ( <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple ...

javascriptreactjsmaterial-ui

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

javascripthtmlangularjsangular-ngmodel

What is the best way to display HTML code using Vue syntax that is retrieved from an Axios GET request

I am currently working on a project that involves a Symfony 5 and Vue 3 application. In this setup, a Symfony controller creates a form and provides its HTML through a JSON response. The code snippet below shows how the form HTML is returned as a string: i ...

javascriptvue.jssymfonyvuejs3

Having issues sending multiple variables to PHP through Ajax

Trying to pass three variables through the URL using Ajax - one constant and two from a date picker. The constant passes fine, but the date variables are only passing as their names. Here's the code for the date pickers: <tr> ...

javascriptphpjqueryajaxurl

What steps can I take to address or bypass Raven's detection of vulnerabilities in my npm library dependencies?

We are currently encountering issues with dependencies in our web application built on AngularJS 1.x, specifically related to vulnerabilities in dependent libraries like raven scan. Here is a snippet from our Package.json file: { "name": "Test", "depe ...

angularjssecuritynpmpackage.json

Could someone kindly clarify the workings of this jQuery script for me?

I found this code online, but I'm struggling to comprehend its functionality. In order to make any edits for my needs, I need to understand how it operates. The purpose of this script is to close a panel with an upward slide animation when the "x" but ...

javascriptjqueryhtml

Adjusting the content of a single text box by typing in another

Is it feasible to automatically convert a Nepali date input in one textbox into an English date and display it in another textbox without any page refresh? I have a PHP function that can translate dates between Nepali and English, and I want it to execute ...

phpjavascriptjqueryhtmlajax

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

javascriptjqueryhtml

Issue with hook not updating when invoked inside useEffect

I'm encountering an issue with updating the state after fetching data from my API. The API response seems to be correct, but for some reason, my weatherData-hook is not getting updated and it returns undefined. Can anyone point out what mistake I migh ...

javascriptreactjsreact-hooks

Is it possible to search LinkedIn using just one keyword?

Is it possible to search for a LinkedIn profile using a single string instead of separate first and last names? The issue is that I only have a single name field in my database... Typically, one would construct a dynamic URL like this: http://www.linkedin ...

c#javascriptasp.net-mvc-3urllinkedin-api

What is preventing the selected values of a dropdown element from being set?

Although it may seem simple to assign values to select elements, I'm puzzled as to why the code below is setting the values to null instead of the correct ones for "form-type" and "genre". All other fields are being set correctly. It's worth not ...

javascriptjqueryajax

AngularJS: when ng-route clashes with Bootstrap datetimepicker

I have nearly completed my calendar app and I am looking to integrate the datetimepicker for updating events. You can find the datetimepicker that I am using at this link: Below is an example of how I have utilized it in HTML: <div class="dropdown" s ...

jqueryangularjsangularjs-directivebootstrap-datetimepickerangularjs-ng-route