Send key-value pairs to the function using ng-model

I am currently working on a functionality that involves extracting an object from json and displaying its key-value pairs using 'ng-repeat' in AngularJS. The form includes checkboxes where the value can be either true or false, determining if they should be checked or not.

<form class="form-horizontal">
  <div class="form-group form-group__bordered"
       ng-repeat="(key, value) in listOfNotificationTypes">

    <label for="inputEmail3">{{ key | trimkey }}</label>

    <div class="checkbox-wrapper">
        <input type="checkbox" class="checkbox" ng-checked="{{value}}">
    </div>
 </div>

 <div class="form-group">
    <div class="col-12 clearfix">
        <a href="#" class="btn"
            ng-click="updateNotificationSettings()">
         SAVE
        </a>
    </div>
 </div>
</form>

While everything is functioning correctly, I am now looking to capture any changes made to the key-value pairs when the 'SAVE' button is clicked and send them through another function. I need to ensure that the data is formatted correctly in JSON, like this:

{
   "key1":"value1",
   "key2":"value2",
   "key3":"value3",
    ...
  }

I believe utilizing 'ng-model' will allow me to capture the necessary data, but I am uncertain about the proper implementation. Any guidance on how to achieve this would be greatly appreciated.

Answer №1

In order to work with your specific type of object, you'll need to utilize the input in this manner.

<input type="checkbox" class="checkbox" ng-model="listOfNotificationTypes[key]">

Check out this plunker for a demonstration of how it's implemented.

Important Notes: A quick tip for future reference: you may eventually need to convert that object into a list of objects like this

[
   {key: "key1", value: false},
   {key: "key2", value: true},
   {key: "key3", value: false}
  ];

If that scenario arises, the frontend code will appear as follows

<div class="form-group form-group__bordered" ng-repeat="notification in listOfNotificationTypes">
 <label for="inputEmail3">{{ notification.key }}</label>
  <div class="checkbox-wrapper">
    <input type="checkbox" class="checkbox" ng-model="notification.value">
  </div>
</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

Enhancing Communication Between JavaScript and PHP

Positioned within my form is an input field where users can enter their postcode. The shipping cost for their order will be determined based on this postcode, utilizing PHP to assign different costs depending on the zone. After the user enters their postc ...

The issue with the `.load` function in jQuery not functioning properly

I'm currently tackling an issue with a project where I am encountering difficulties with the .load function not working in Google Chrome. Below is the JavaScript code: function link1() { $('#loadarea').html('loading.....' ...

Using TypeScript to Verify the Existence of Words in a String

Is there a way in typescript to find specific words within a given string? For example: If we have a list: ['Mr', 'Mrs', 'FM.', 'Sir'] and a string named 'Sir FM. Sam Manekshaw'. The words 'Sir' ...

What are the best practices for securely storing SSL certificates and public/private keys?

I possess keys that appear like this. MIID0DCCArigAwIBAgIBATANBgkqhkiG9w0BAQUFADB/MQswCQYDVQQGEwJGUjET MBEGA1UECAwKU29tZS1TdGF0ZTEOMAwGA1UEBwwFUGFyaXMxDTALBgNVBAoMBERp bWkxDTALBgNVBAsMBE5TQlUxEDAOBgNVBAMMB0RpbWkgQ0ExGzAZBgkqhkiG9w0B CQEWDGRpbWlAZGltaS5mcjA ...

What is the best way to style a value within a v-for loop inside an el-option element in Element UI?

I'm looking for a way to format the value in label(item.value) as a decimal within a v-for loop. Below is my code snippet: <el-form-item :label="label" :required="required" prop="Jan"> <el-select v-model=& ...

FancyBox - Is there a "Never show this message again" option available?

I implemented FancyBox on my website to display important information to users. However, I would like to enhance the user experience by adding a button that allows them to set a cookie and prevent the message from popping up for about a month. Since I&apo ...

Angular JS displays an error message when the user selects an input field and fails to provide any input

On my wizard steps application, I have implemented Angular JS validation that displays errors when the user enters and removes a character in the input field. However, I am trying to figure out how to show the error message if the user tabs onto the fiel ...

Tips for creating a scrollable smiley input field

I have a chat system where I am incorporating smileys from a predefined list. QUERY I am looking to create a scrolling feature for the smileys similar to how it is implemented on this particular website. The twist I want to add is to have this functiona ...

Modifying JQuery function to target two IDs instead of just one

I am utilizing a bootstrap 5 tablist on my website that allows for navigating between tabs using custom left and right arrows. If I wish to introduce a second bootstrap 5 tablist with a new unique ID, how can I modify the code to integrate the new ID and e ...

From SQL Arrays of Objects to Values: Transforming JSON in SQL 2016

In SQL 2016, there is a new feature that allows you to convert data on the SQL server to JSON. I am facing challenges when trying to combine an array of objects into an array of values. For example: CREATE TABLE #temp (item_id VARCHAR(256)) INSERT INTO ...

Transformation of data structures

Is there a way to transform the array structure that represents parent-relation into a 2D array format? const array = [{id: 1, parentId: 2}, {parentId: null, id: 2}]; The goal is to create a new array where the first element of each nested array is the pa ...

Appium with Node.js (wd) becomes unresponsive when unable to locate element

Encountering an issue while using appium with nodejs (wd) and mocha, as there is a loading view in the android app (blackbox testing & I'm not the developer) that needs to be waited for its disappearance. Attempted the following solution: wd.addPromi ...

Converting JSON objects to C# Dictionary using WCF DataContract

I am attempting to deserialize a JSON dictionary that I receive from a python application over HTTP into a Dictionary in C#. The structure of the JSON object is as follows: { "native_dict": { "foo": 0, "bar": 1 }, "obj_dict": ...

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

Printing an Iframe using Safari print with Javascript results in an empty output

After researching the issue of printing blanks in Safari, I discovered that a white flash occurs before the print dialog can grab the content of the iframe. All my javascript works perfectly in every browser except for Safari. When attempting to print, it ...

What is the best way to display the friends of the current user in a MeanJS application?

How can I show the Authenticated user's friends on an angularjs page? // Retrieve the list of Friends $scope.find = function() { $scope.friends = Authentication.user.friends; $scope.firstFriendName = Authentication.user.friends; ...

Having trouble with sending data from Angular to a Node.js route

I am facing an issue while trying to send the array subjectAverage to a nodejs route. I am using an express route in my angular application, but encountering 'unidentified' error when attempting to print it on the console. var app = angular.modu ...

The child directive has the ability to interact with every parent directive

I am attempting to create a slider using angularJS. Within this slider, I have implemented a child directive with event listeners. Whenever the main event (mousedown) is triggered, it invokes a function from the parent directive through a controller and up ...

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

Differences between async/await and then methods in React, demonstration shows that only async/await is functional. Why is

Trying to understand and implement two different API data fetching methods in React app development. The first method involves using the JavaScript Fetch API, while the second method utilizes the async/await syntax. I am currently experimenting with both a ...