ways to dynamically assign ng-model

Here is the code that I am working with:

<div class="form-group" ng-repeat="(key, day) in {'monday':'Monday','tuesday':'Tuesday','wednesday':'Wednesday','thursday':'Thursday','friday':'Friday','saturday':'Saturday','sunday':'Sunday'}">
    <label for="{{key}}" class="col-sm-3 control-label">{{day | translate}}</label>
    <div class="col-sm-4">
        <input type="number" class="form-control" ng-model="wd.{{key}}" id="{{key}}" name="{{key}}" min="1" placeholder="{{'Enter the price' | translate}}" required />
    </div>
</div>

In this code snippet, there is an ng-model on the input attempting to dynamically set the model as wd.{{key}}.

However, upon running the code, an error message states that there is an invalid property name after the dot.

Is there a way to achieve the same functionality without duplicating HTML for each day of the week?

javascriptangularjs

Answer №1

To utilize the bracket notation in JavaScript, remember to use it within ng-model:

ng-model="wd[key]"

Answer №2

To start off in your controller, make sure to do the following:

$scope.weekDays = [   {key: 'monday', day: 'Monday', value: ''},
                        {key: 'tuesday', day: 'Tuesday', value: ''},
                        ***
                    ];

Then, in your HTML file:

<div class="form-group" ng-repeat="day in weekDays">
    <label for="{{day.key}}" class="col-sm-3 control-label">{{day.day | translate}}</label>
    <div class="col-sm-4">
        <input type="number" class="form-control" ng-model="day.value" id="{{day.key}}" name="{{day.key}}" min="1" placeholder="{{'Enter the price' | translate}}" required />
    </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

Using Angular 2 to Create a HTTP Service for Deletion

I'm facing an issue while trying to develop a service for deleting data from my external database. The error message I keep encountering reads as follows: The type argument 'T' cannot be inferred from the usage in this scenario. It is sug ...

angularjshttpservice

Remove the "x" character from the phone field if an extension is not provided in the Jquery masked input plugin

Currently utilizing the jquery Masked input plugin. The mask I have applied to a field is as follows: "?999-999-9999 x9999" Why is there a ? at the beginning? This was implemented to prevent the field from clearing out when an incomplete number is ente ...

javascriptjquerymaskedinputjquery-mask

Exploring React: Post-mount DOM Reading Techniques

Within my React component, I am facing the challenge of extracting data from the DOM to be utilized in different parts of my application. It is crucial to store this data in the component's state and also transmit it through Flux by triggering an acti ...

javascriptdomreactjsflux

jqgrid search bar options for filtering column names

Hello everyone, I have been using jqgrid with jsonstring datatype and incorporating a search box for filtering data. Currently, the searchbox filters are based on column names which is standard. For example: colNames:['Name','StartDate&ap ...

javascriptjqueryjqgrid

Error message: Socket.io encountered a 'TypeError' when attempting to access an undefined property 'push'

Currently, I am utilizing socket.io to facilitate communication between two servers. However, following an update to the latest version of the socket.io package, a persistent issue has arisen: The error originating from the module is as follows: "Cannot ...

javascriptnode.jssocketsnpmsocket.io

Tips for assigning custom values using CSS and jQuery for a standalone look

I am facing a challenge with my HTML markup: <div> <figure></figure> <figure></figure> <figure></figure> </div> Alongside some CSS styling: div { position: relative; } figure { position: absolu ...

javascriptjqueryfigure

The jQuery slider's next button is not functioning as intended

jQuery('#slider-container').bjqs({ 'animation' : 'slide', 'width' : 1060, 'height' : 500, 'showControls' : false, 'centerMarkers' : false, animationDuration: 500, rotationS ...

javascriptjquery

"Partial success in capturing a screenshot using Div with the help of Javascript and html2canvas.js

My goal is to capture a screenshot of an image inside div elements. When the image is static as shown in the code below, everything works perfectly and displays the correct base64 image conversion: <div class="container_im" id="container_im"> <im ...

javascriptjqueryhtml2canvas

"Keep an eye on the value of elements within Angular framework

I am trying to develop a directive that can be used in the following way: <div before-today="old">{{exampleDate}}</div> The purpose of my directive is to check if the date within the div is before "today" and if it is, apply the CSS class "ol ...

javascriptangularjs

What is the best way to retrieve text content along with images from an element using jQuery?

Is there a way to retrieve the combined text contents of each element in the matched set, while still including any images present? Consider the following input: <div id="test">Lorem ipsum <strong>dolor</strong> sit amet, consectetur &l ...

javascriptjqueryhtml

Issue: App is not being styled with Material UI Theme Colors

I'm having trouble changing the primary and secondary colors of Material UI. Even after setting the colors in the theme, the controls like Buttons or Fabs still use the default colors. Can someone help me figure out what I'm missing? index.js /* ...

javascriptreactjsmaterial-ui

What is the best way to retrieve the elements stored within the 'this' object I am currently manipulating?

How can I access the elements nested within the 'this' that I am currently operating on? Below is the HTML code that I am currently working with: <div class="expander" id="edu">educational qualifications <ul class="list"&g ...

javascriptjqueryhtmlthis

Troubleshooting: Issues with Angular form validation functionality

I am completely new to Angular and attempting to create a signup form. Despite following tutorials, the form I've built doesn't seem to be validating properly. Below is the code that I have been using: <div class="signup-cont cont form-conta ...

javascripthtmlangularjs

Issue with Electron: parent window not being recognized in dialog.showMessageBox() causing modal functionality to fail

Struggling with the basics of Electron, I can't seem to make a dialog box modal no matter what technique I try. Every attempt I make ends in failure - either the dialog box isn't modal, or it's totally empty (...and still not modal). const ...

javascriptnode.jselectron

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Hello and thank you for taking the time to read my query! I am currently working in a Vue file, specifically in the App.vue where I am importing an external .js file containing icons. Here is how I import the script: let recaptchaScript2 = document.creat ...

javascriptvue.jsvuejs2vue-component

Methodically generate various instances of a customized hook to enhance store entities with extra functionalities

Suppose I have a unique hook that retrieves an entity's state and adds some custom methods for making mutations: // Fetches an entity from the store and includes methods for updating and removing it const useEntity = (entityId) => { // Selects th ...

javascriptreactjsreact-reduxredux-toolkitrtk-query

Navigating with Angular: Understanding ng-view and Routing

How does Angular understand which template view to request containing the 'ng-view' element? If I directly navigate within my application to http://localhost/Categories/List/accessories , a request is still sent to '/' or the index ...

javascriptasp.net-mvcangularjsngroute

Leveraging dependency injection in Angular 2+ with pre-loaded models

I desire the ability to create an instance of a model using a constructor while also providing injected services to that model. To clarify, I envision something like this: var book = new Book({ id: 5 }); // creates instance, sets id = 5 book.makeHttpCa ...

javascriptangular

What is the best way to integrate NodeJS into a Java application?

I am currently developing a Java library, specifically, a Clojure library that runs on the JVM. In the process, I need to incorporate JavaScript execution. I initially attempted using Nashorn, but encountered limitations that may be too challenging to over ...

javascriptjavanode.jsclojuresubprocess

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax