retrieving an array of checkbox values using AngularJS

As a beginner in Angular, I have been struggling to implement a feature where I can add a new income with tags. I have looked at similar questions posted by others but I still can't get it to work.

The tags that I need to use are retrieved from a service and displayed like this:

<label ng-repeat="tag in tags">
    <input type="checkbox" ng-model="tags_chosen" name="tags_chosen[tag]" ng-true-value="<%tag.id%>"/> <%tag.name%>
</label>

However, when I try to capture the checkbox values in Angular, I encounter issues. Here is the relevant code snippet:

 this.addIncome = function($scope) {
    var data = {
        'project_id':$scope.project_id,
        'amount':$scope.amount,
        'payment_date':$scope.payment_date,
        'tags':$scope.tag_chosen,
        'description':$scope.description,
        'type':$scope.type
    };

    return $http.post(URL.BASE_API + 'income/store',data).
    success(function(response) {
        ServicesStatus.return = response;
    }).error(function(response) {
        console.log('Service error');
    });
};

I would appreciate any guidance on how to resolve this issue. Thank you!

Answer №1

For a possible solution, consider the following:

$scope.selected_tags =[];

$scope.updateSelectedTags = function ( tagId, $event ) {
   var checkbox = $event.target;
   var action=(checkbox.checked ? 'add':'remove');

    var index = $scope.selected_tags.indexOf( tagId );

    // tag is already selected
    if (action=='remove' && index != -1 ) { 

        $scope.selected_tags.splice( index, 1 );

    }

    // tag is newly selected
    if (action=='add' && index == -1 ) {

        $scope.selected_tags.push( tagId );
    }

Then, in your HTML code >>

ng-click="updateSelectedTags(tagValue,$event)"

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

Appending a new element to a JSON object using JavaScript

Hey there, I have a JSON object called departments. When I use console.log(departments) it displays the following data: { _id: 58089a9c86337d1894ae1834, departmentName: 'Software Engineering', clientId: '57ff553e94542e1c2fd41d26', ...

What is the best way to handle multiple JSON data using jQuery?

Understanding how to utilize jquery for parsing simple json is a valuable skill. json { "Symbol": "AAL.L", "Name": "ANGLO AMERICAN", "Last": "3061.50", "Date": "7/26/2011", "Time": "11:35am", "Change": "+3 ...

Generating various arrays of data

I am currently facing an issue with creating separate datasets based on the month value. Despite my efforts, all month values are being combined into a single dataset in my code. Any assistance in dynamically generating different datasets would be greatly ...

Executing a C# method from within a .js file using a Javascript function in a .cs file

I've made some updates based on the responses provided. My main area of confusion lies in the 'data' parameter and how to handle it in the JavaScript call. C# method [HttpPost] public string GetPreviewURL(string activityID) ...

Transferring information to a view using ExpressJS and Reactjs

I have created an application that requires users to log in with Twitter credentials. Once logged in successfully, I typically pass the user data to the template using the following code: app.get('/', function(req, res, next) { log("The ...

Using the excel.js module in conjunction with node.js to create distinct columns within a header row

I am facing an issue with Excel.js while trying to add a header row to a CSV file. It seems that all the columns in the row are getting merged into one cell instead of staying separate. Does anyone know how to properly separate the columns? https://i.sst ...

Angular's Restangular initiates a blank promise at the beginning

One of the services I created can fetch data from the server and cache it, or retrieve data directly from the cache. The code snippet below illustrates this functionality. While using .then statements in the client side for cached data, I've noticed ...

I'm looking for a way to incorporate JavaScript code within an iframe tag. Specifically, I'm attempting to embed code into a Wix website using the "Embed HTML

Trying to execute the code below on a Wix website using "Embed HTML", but IFRAME is blocking scripts. Seeking help to embed custom HTML with JavaScript on platforms like Wix.com or Wordpress.com, as the embedded code is not functioning due to IFRAME restri ...

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

Add a variety of input values to a div in designated spots

Objective: The aim is to allow the user to connect form fields with specific locations within a content from another div, and then add the text entered in individual input fields to those corresponding locations. Here is the link to the fiddle HTML: < ...

Downloading Laravel Excel Files via an Ajax Call

Is it possible to generate an Excel file using Laravel with PHPSpreadsheet (PHP lib) and then send the XLSX file to the frontend for download? JSX Section axios .get( "/excel/export/dashboardTable", {} ) .then(resp => { //success call ...

Angular's slide animation effect seems to be malfunctioning and not behaving as anticipated

Just getting started with web development and I'm attempting to create a sliding page in Angular using ng-view. However, I'm running into an issue where when page two enters, it displays below page one until page one is available. You can view th ...

What is the process of sending a file from a remote URL as a GET response in a Node.js Express application?

Situation: I am working on a Multi-tier Node.js application with Express. The front end is hosted on an Azure website, and the back end data is retrieved from Parse. I have created a GET endpoint and I want the user to be able to download a file. If the f ...

Each element is being adorned with the Ajax success function class

Currently, I am in the process of creating an Ajax function to integrate search features into my project. The search function itself is functioning properly; however, within the success: function, I am encountering an issue. Specifically, I am attempting t ...

Tips for properly implementing a bcrypt comparison within a promise?

Previously, my code was functioning correctly. However, it now seems to be broken for some unknown reason. I am using MariaDB as my database and attempting to compare passwords. Unfortunately, I keep encountering an error that says "Unexpected Identifier o ...

Exploring the concept of front-end deletion through ajax technology

I'm currently tackling a front-end CRUD RESTful API project and encountering challenges specifically related to the DELETE and PUT methods. While I have successfully managed to implement the GET and POST functionalities, utilizing a forms.html file f ...

Getting the parameter route value from Laravel and passing it to Ajax

Need help with returning the parameter of a Laravel route to an AJAX response. Here is the relevant code: public function getPermissions(Request $request) { //$v = request()->route()->parameters('profile'); $v = request()-& ...

How to extract a value from a span input textbox using Vue?

I just started using Vue and I'm attempting to create an auto-growing input. I've realized that it's not possible to create a real <input> element that adjusts its size based on its content and allows for value modifications using v-mo ...

Rotating an SVG shape a full 360 degrees results in no visible change

Currently, I am utilizing d3.js for a project and encountering an issue with rotating an SVG element 360 degrees to achieve a full spin back to its original position. If I rotate the element 3/4 of the way using the following code snippet, it works effect ...

Implementing Singletons in Node.js

While examining some code, I came across the following snippet: var Log = require('log'); // This creates a singleton instance module.exports = new Log('info'); Initially, my reaction was doubting that it could be considered a single ...