Using Ionic's ngmodel directive with a list and associating ids as keys

Having an issue.

Trying to connect a toggle button with a list and use the toggle's id as a key.

//Function for conversion
 transform(d)
   {

   alert(d); //when i put this.id here i have undefined value
   return Number(d);
   }
<ion-toggle id="0" name="toggle1" [(ngModel)]="listToggle1[this.id)]"></ion-toggle>

<!--The problem is that "id" is a string and I need an integer key for the list -->

<!--This works but isn't dynamic -->
<ion-toggle id="0" name="toggle1" [(ngModel)]="listToggle1[0]"></ion-toggle>

<!-- I attempted this -->

<ion-toggle id="0" name="toggle1" [(ngModel)]="listToggle1[transform(this.id)]" ></ion-toggle>

<!--I'm using a function to convert the string id to an int value in typescript

But the issue lies in transform(this.id) where this.id is undefined-->
<!--This works but again not dynamic -->
<ion-toggle id="0" name="toggle1" [(ngModel)]="listToggle1[transform('0')]" ></ion-toggle>

Hoping for any assistance on this matter.

javascripttypescriptionic-framework

Answer №1

If you're looking to capture the element that was clicked using (ionChange) in your component, consider following this approach:

For your HTML:

<ion-toggle id="0" name="toggle1" (ionChange)="listToggle1($event)"></ion-toggle>

And for your TypeScript code:

listToggle1(event) {
    console.log(event._elementRef.nativeElement.id);
}

By implementing this, you can easily extract the id of the toggled element and proceed with further actions accordingly.

Answer №2

At the conclusion, as previously mentioned, my goal is to replicate/duplicate certain HTML elements.

In my project, I have an alarm system that users can customize (timer, text notification, etc.).

I have a "template" that should ideally be duplicated in order to create multiple alarms with different parameters.

myapp

So when a user clicks on "add new," the same HTML element as "the form" should be added but with new values. That's the concept. However, I am struggling with a suitable cloning function.

duplicate(d) {
alert(d);
var i = 0;
var original = document.getElementById(d);

    var clone = original.cloneNode(true); // "deep" clone

clone.id = Number(d)+1;
alert(clone.id);


    original.parentNode.appendChild(clone);

}

The only thing I can alter is the ID of the new element (I cannot modify other attributes like ngmodel). Additionally, when I clone an element, I am unable to modify the new element on the HTML page from the user's perspective.

Perhaps someone knows of a more effective way to clone/duplicate HTML elements?

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

Invoking a plugin function within a page function results in failure

After setting up a plugin named helper.js inside plugins/ directory, I encountered an issue where the plugin's functions did not work when called inside another function. Below is my code snippet for helper.js: import Vue from 'vue' imp ...

javascriptvue.jsnuxt.js

What is the best way to implement a timer or interval system in React and Next.js that continues running even when the tab is not in focus or the browser is in

I am attempting to create a stopwatch feature using next js. However, I have encountered an unusual issue where the stopwatch does not function correctly when the tab is not focused or when the system goes to sleep or becomes inactive. It appears that the ...

javascriptreactjsnext.js

block the UI when a certain amount of time has passed

When I click on a button, I implement the following code: $(document).ready(function () { $('.find').click(function () { $.blockUI({ message: '<table><tr><td><img src="images/pleas ...

javascriptjqueryhtml

Utilizing Angular CDK to link several drop zones together using the cdkDropListConnectedTo directive

Currently in the process of designing a basic board interface with swim lanes similar to Jira swimlane or trello boards https://i.sstatic.net/7MBvm.png The red lines indicate the current flow The blue lines represent the flow that I aim to implement The ...

angulartypescriptangular-materialangular-material2angular-cdk

Unable to perform the 'setSelectionRange' function on the 'HTMLInputElement' due to the input element's type being 'number', which does not allow selection

My attempt to enable text selection in an input box upon user click by using the code snippet below was unsuccessful: <input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" /> Instead of achieving the desired ef ...

javascripthtmljquerycsshtml-input

To successfully display the data on my ChartJS Line graph, I have to first click on the color legend

I am currently using Chart JS to visualize sensor data retrieved from a firebase firestore database. I've come across an unusual issue where my chart fails to display the data initially >> https://i.sstatic.net/qD6Sd.jpg but after performing two ...

javascriptreactjschart.jsreact-chartjsreact-chartjs-2

Tips for updating the date format in Material UI components and input fields

Is there a way to customize the date format in Material UI for input text fields? I am struggling to format a textField with type 'date' to display as 'DD/MM/YYYY'. The available options for formatting seem limited. It would be helpful ...

javascripthtmlcssreactjsmaterial-ui

Sorting after grouping in AngularJS is a breeze

After using lodash.js groupBy to organize my collection, the order is correct when I log it with console.debug. However, when I try to display it in the UI using ng-repeat, the ordering gets messed up. var list = [{id:1,categoryId:1,name:test1}, ...

javascriptangularjsunderscore.jslodash

Unexpected behavior observed in JavaScript and AJAX functionality

In my web development project, I've decided to incorporate JavaScript and AJAX for the signup form functionality. However, I seem to be facing some challenges as I try to post all the textbox values from the signup form through AJAX. The code snippe ...

javascriptjqueryajax

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

Trying to utilize jQuery for loading html posts into the main html page and enabling external scripts to function on them. Utilizing a script (load.js) to load posts into the index.html page: $(document).ready(function () { $('#header').loa ...

javascripthtmljquery

Unit tests are successful, but an error occurs stating "headers cannot be set after they have been sent."

Currently, I am working on writing unit tests for the API endpoints of my very first express app. I am using a data structure as a placeholder for a database and all the tests are passing successfully. However, I encountered an error in the console stating ...

javascriptexpressmocha.jstddchai

Tips for acquiring offspring who are exclusively not descendants of a particular node

Currently, I am utilizing jQuery and my goal is to access all elements of a specific type that are not children of a particular node type. For example, my Document Object Model (DOM) structure looks like this: <div id='idthatiknow'> & ...

javascriptjqueryjquery-selectors

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

As my web app runs on port number, I am looking to download some files in a specific section. However, the download file path is being prefixed with "". <a href={file_path} download={file_name}> <Button variant={"link"}> <b>Dow ...

javascripthtmlreactjsreact-reduxreact-bootstrap

Tips for utilizing multiple CSS styles in JavaScript

My goal is to apply multiple CSS styles to a button with the id of name_button. Below is the JavaScript code I have written: var name_button = document.getElementById('name_button'); name_button.style.display = 'block'; name_button.st ...

javascripthtmlcss

Utilizing browser history navigation features in Angular 6: A comprehensive guide

I am looking to take charge of my Angular 6 web application. Is there a way to send an alert to users if they refresh the screen? If so, how can I achieve this? ...

typescriptangular6

Adjust the color scheme of the menu to match the newly updated background image

On the homepage, there is a background slideshow playing. The issue arises when the menu becomes invisible against a dark background due to its dark font color. It would be ideal for the menu's color to dynamically change with the background. I' ...

javascriptjquerypluginsjquery-plugins

To validate any object, ensure that it contains a specific key before retrieving the corresponding value in typescript

When looking at a random object, my goal is to verify that it follows a certain structure. obj = {WHERE:{antherObject},OPTIONS{anotherObject}} Once I confirm the object has the key using hasProperty(key), how can I retrieve the value of the key? I thoug ...

javascriptjsonobjecttypescript

Why do Material UI components fail to render in jsdom while using Jest?

During my UI testing using Jest/React Testing Library, I encountered a peculiar issue. In one of my components, the return statement is structured as follows: const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileC ...

javascriptreactjsjestjsnext.jsmaterial-ui

Utilize JavaScript to communicate with the backend server

I'm embarking on my first Cordova application, utilizing HTML, CSS, and JavaScript. My current objective is to trigger a local server call upon button click, with the intention of logging something to confirm functionality. However, I'm encounter ...

javascripthtmlnode.jscordovacordova-plugins

what strategies can be implemented to prioritize addressing validation errors in return forms

I'm currently working on a web application in asp.net mvc-5, and I have a contact form displayed in the middle of the Contact Us view. Here's the code snippet: <div class="col-sm-8 col-sm-push-4"> <h2>Contact Us1 ...

javascriptjqueryhtmlasp.net-mvcrazor