Delete the strings in the array once the checkbox is unchecked

I have some data for my checkbox here,

$scope.dataList = {
    'ICT': true,
    'OTTIX_DT': true,
    'CP EMR AD': true,
}
<input type="checkbox" ng-model="miniAddons.dataList[data.jobName]" 
ng-change="pickExtra($event,'miniAddons', chosenMiniAddons, data.jobName);">

$scope.pickExtra = function(evt,JBname,chosenMiniAddons,chosenOptions){
    
    $scope.userSelectedMiniAddon = Object.keys($scope[miniAddons].dataList);

}

My goal is to control button enable/disable based on the selection, by using the results of 

var temp = Object.keys($scope.dataList)
where I get the keys as an array and check its length. If the length is greater than 0, I enable the button, otherwise, I disable it.

When I click on a checkbox, I see the array items increasing as expected. However, I am unsure how to remove items when unchecking the checkbox.

In simple terms, if all values in $scope.dataList are set to false, then I need to disable the button. The button should only be enabled if at least one key has a value of true.

I am currently using old-fashioned JavaScript, without even any ES6 features, and I am confused about how to perform filtering and mapping operations in this context.

I would appreciate any help on this matter.

javascriptangularjs

Answer №1

Providing assistance based on the limited information available may pose some challenges, but it seems that the issue with your checklist not shrinking could be due to the key not being deleted from the array.

You can try utilizing the filter function on Object.keys(yourData)

$scope.dataList = {
    'ICT': true,
    'OTTIX_DT': true,
    'CP EMR AD': true,
}
<input type="checkbox" ng-model="miniAddons.dataList[data.jobName]" 
ng-change="pickExtra($event,'miniAddons', chosenMiniAddons, data.jobName);">

$scope.pickExtra = function(evt,JBname,chosenMiniAddons,chosenOptions){
    // Will filter out each option that is false, so the list will be empty if all are unchecked
    $scope.userSelectedMiniAddon = Object.keys($scope[miniAddons].dataList).filter((key => {
      if($scope[miniAddons].dataList[key]) { // check if the value is true.
        return key;
      }
    });

}

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

Optimizing JavaScript for efficient handling of large arrays

I'm currently developing an image editing program using JavaScript to expand my knowledge of the language. The images I am working with are typically around 3000 x 4000 pixels in size, resulting in a total of 48,000,000 values to manage when convertin ...

javascripthtmlperformanceimage-processingweb-worker

Discover a method to conceal an element within a <div> by monitoring mouseover events in a separate <div> container

<div id="one-id"> <div id="some">Information</div> <div id="control"> <div id="value-1"> <img id="image-one-id" /> <img id="image-two-id" /> ...

javascriptprototype

Utilizing Angular.js to extract data from a deeply nested array of objects in JSON

Hello, I am currently learning about Angular.js and working on developing a shopping cart. In this project, I need to display an image, name, and cost of each product for multiple tenants. Each tenant has an array called listOfBinaries which contains listO ...

javascriptajaxjsonangularjsparsing

Guide to utilizing jquery within node.js

Can anyone assist me with using jQuery in Node.js? I have the following code: const jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } = new JSDOM('<!DOCTYPE html>'); const $ = require('jquery')(window); var con ...

javascriptnode.jsexpressejs

Google Scripts: Generating a set of data to include in an email

As a newcomer to Google Script and JavaScript, I'm on a mission to email a list of file names extracted from a spreadsheet. The names reside in a column within my sheet, and after defining a variable called "newfiles" to cherry-pick only the necessary ...

javascriptgoogle-apps-scriptgoogle-sheets

Incorrect positioning on canvas

Is there a way to adjust text alignment within a canvas? Currently, my text is centered. However, when I change the text size, the alignment gets thrown off. Here is the code snippet: <canvas id="puzzle" width="480" height="480"></canvas> ...

javascripthtmlcanvas

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

I have limited experience in web development, but I recently created a webpage that allows users to input data into an SQL database. While my code is functional, I believe there's room for optimization. I pieced it together from various online resourc ...

javascriptphphtml

"We are experiencing issues with the app.get function and it is

Although my backend is successfully serving other files, I have encountered an issue with loading new files that are located in a folder named js within the directory. These specific files are not being loaded, and despite spending an hour trying to troubl ...

javascriptexpressserverbackend

Issues with Vercel's JavaScript Environment Variables Accessibility

I am encountering an issue trying to access environment variables on Vercel using JavaScript (TypeScript). Despite setting them under /settings/environment-variables, I receive undefined when attempting to access them with process.env.TURSO_DATABASE_URL du ...

javascripttypescriptvercel

Is there a way to extract information from an external XML document and incorporate it into an HTML file?

I am attempting to extract information from an XML file that is not stored on my website's server. My goal is to utilize this data for various purposes, such as generating charts. One specific example involves using weather data from an XML file locat ...

javascriptxmlexternal

Full replacement of a cell within an HTML table

I have a scenario like the following: <table id="myTable"> <tr> <td class="1">cell 1</td> <td class="2">cell 2</td> </tr> <tr> <td class="3">cell 3</td> &l ...

javascripthtml

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Within my project, some common functions are stored in separate .ts files. Is there a way to incorporate i18n in these cases? // for i18n import Vue from 'vue' declare module 'vue/types/vue' { interface VueConstructor { $t: an ...

javascripttypescriptvue.jsvue-i18n

Create intricate text on the canvas by individually rendering each pixel

In my canvas project, I am using "fillText" to display a string such as "stackoverflow". After that, I extract the image data from the canvas to identify each pixel of the text. My goal is to capture the x position, y position, and color of each pixel. Th ...

javascripthtmlcanvashtml5-canvasparticles

Change the locale on the current path with a query in Next.js by utilizing the router

Managing locale changes centrally can be tricky. When a user selects a new locale from a list, I use useRouter to redirect them to the current page in the selected locale like this: var router = useRouter(); const changeLocale = (selectedLocale) => { ...

javascriptroutesnext.js

The installation of the material ui package was unsuccessful

C:\Users\User\Desktop\client4>npm i @material-ui/icons npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] ...

javascriptnode.jsreactjsnpm

Error: Unable to apply filter on this.state.pokemon due to invalid function

My goal is to fetch data from the PokeAPI and iterate through the array of information that is returned. I begin by setting my state to an empty array, then proceed to make the API call and retrieve data from the response, adding it to my pokemon state. ...

javascriptarraysreactjs

Retrieve information from a URL and transform it into a JSON array

One of my functions looks like this: function retrieveJsonDataFromWebsite(url, callback) { let chunks = []; return require('https').get(url, res => { res.setEncoding('utf8') .on('data', (chunk) => { ...

javascriptjsonnode.js

Tips for dividing a single row retrieved from a MySQL database that has been converted with json_encode so that it can be shown in

Looking to extract data from a MySQL query result in one PHP page and transfer it to a separate page with JavaScript. Here is my attempt so far: I am aiming to retrieve specific values from the selected row in the MySQL table and populate them into #event ...

javascriptphpmysqlajax

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

javascriptjqueryruby-on-railsajax

Encountering invalid JSON response while making an API request

Struggling to integrate GoToMeeting's API by sending a POST request to create a meeting. Currently, attempting to manually code the meeting body and send the necessary headers, but encountering an issue with invalid JSON error. Below is the code snipp ...

javascriptjsonapiexpress