Angular.js is experiencing difficulties when using the input value attribute in conjunction with ng-model

I've been hard at work on an app that allows users to edit items, with those changes updating in a database. To prevent empty form submissions, I automatically fill the input fields with the current item's information.

form.form-update(method="post", ng-repeat='item in items', autocomplete="off" ng-submit='edit()')
        .form-group
            label(for='key') Key:
            input.form-control(type="text" id="key" ng-init="key.updateKey='{{item.key}}' " value='{{item.key}}' name='keyUpdate' ng-model='key.updateKey')`
.form-group
            button.btn.btn-primary(type="submit") Save
            a.btn(href='/') Cancel`

However, submitting an empty form now results in saving '{{item.key}}' in the Database instead of retaining the old data.

javascriptangularjsmongodbpost

Answer №1

After some investigation, I finally uncovered the root cause of the issue. Surprisingly, it seems that the {{}} is unnecessary, therefore resulting in the following code:

input.form-control(type="text" id="key" ng-init="key.updateKey=item.key", name='keyUpdate' ng-model='key.updateKey')

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 node.js and mongoDB: Retrieve a custom value if the field is empty

My goal is to query the database for documents and if a certain field is not set, I want to replace it with a custom value. Let's say I have a collection of songs in my database where some have 'pathToCover' set and some don't. In those ...

node.jsmongodbmongoosemongodb-queryaggregation-framework

Breaking down an Express app into modules: incorporating a function, a class, and req.pipe

Below are two servers and two gqlServers, each with different functionalities. All combinations of them work. The task at hand is to enhance express with predefined code patterns that can be shared across various apps through additional methods. What com ...

javascriptnode.jsexpress

Using keys dynamically fetched from a JSON array file to enhance d3js functionality

I am looking to dynamically retrieve keys from an external JSON array and utilize them in d3js functions to create bar charts. Below is the JSON code provided: [ { "Interns": 5, "Projects": 10, "Time":"Jan" }, { "Interns": 16, "Pr ...

javascriptjsond3.js

Ways to automatically update property value in MongoDB once a particular date is reached

Is it feasible to schedule a future date for a document in MongoDB, such as 30 days from the current date, and then automatically update another property of the document when that future date arrives? For instance: creating an event document setting the ...

javascriptnode.jsmongodbexpressmongoose

Exploring the nuances between Ruby on Rails and the responses from json and JavaScript ajax

I am interested in learning the most effective method for handling an ajax request. Would it be better to send json data and parse it on the client side (for instance using pure), or should I generate javascript at the server side and send back the respo ...

javascriptruby-on-railsajaxjsonpure-js

Using the fieldset element in AngularJS Material causes disruptions in my flex layout

My current issue can be illustrated through two code examples: The first example functions properly when the fieldset is not included. In the second example, including the fieldset causes the layout to extend beyond the window when there is long text (in ...

javascriptcssangularjsflexboxangularjs-material

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript Currently working with an array of functions like this private listeners: ((name: string) => void)[] = []; Successfully adding functions to the array within another function. Now looking to trigger those ...

javascriptarraystypescript

What will occur if I use an XMLHttpRequest to request a file that is currently being downloaded?

My goal is to enhance links in a progressive manner using the PJAX style. My plan was to layer this on top of some regular prefetch <link>s: <link rel="prefetch" href="next.html"/> If the browser has already downloaded next.html, then the PJA ...

javascripthtmlajaxprefetch

Angular UI Router Uib Modal: Refresh the page below when clicking outside the modal

I am currently using angular-ui-router-uib-modal and have a query regarding it. After closing my modal (which confirms a successful/failed operation), I want to reload the page below that displays a list of data. In the example provided, I can define thi ...

angularjsmodal-dialogbootstrap-modalangular-ui-bootstrap

Struggle arising from the clash between a customized image service and the built-in image element

Dealing with a custom Angular service called Image, I realized that using this name poses a problem as it clashes with Javascript's native Image element constructor, also named Image. This conflict arises when attempting to utilize both the custom Im ...

javascriptangularjsimagedependency-injection

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Is it necessary to ensure application readiness before proceeding with unit testing exports?

I've been facing a challenge while trying to utilize Jest for unit testing an express API that I've developed. The issue arises when the database needs to be ready before running the test, which doesn't seem to happen seamlessly. In my serve ...

javascriptnode.jstypescriptexpressecmascript-6

Issue with Submit Button Functionality following an Ajax Request

I am facing an issue where the submit button does not work after an ajax call, but works fine if I reload the page. The problem arises when a modal is displayed for email change confirmation. If the user confirms the change, the form submits successfully. ...

javascriptjquery

"Upon setting the state in React, the Full Calendar refreshes and retrieves events

My current setup involves using the FullCalendar API to fetch events as shown below: <FullCalendar ref={calendarRef} plugins={[listPlugin, bootstrap5Plugin]} initialView='listMonth' ...

javascriptreactjsfullcalendar

Ensuring Stringency in JQuery's '$' Selector

I have a specific data attribute within the div element that is displayed in the HTML. <div my-custom-attrib="1".../> <div my-custom-sttrib="2"...> Now, in JQuery, I am attempting to filter between the div elements based on the value of the c ...

javascriptjquery

Using AJAX to submit a single form

Within my HTML view, I have multiple forms that are displayed using a PHP foreach loop. One of the form examples is as follows: <form method="POST" class="like-form-js"> <input type="hidden" name="post_id" value="<?= $post['i ...

javascriptphpjqueryhtmlajax

JavaScript - Employing the .every function with an array containing objects

Is it possible to use the array.every method on multidimensional arrays? The structure of my array is as follows: tabs=[ {label: string, icon: icon, routerLink: link}, {label: string, icon: icon, routerLink: link}, {label: string, icon: icon, routerLink: ...

javascriptarraystypescript

Error: THREE.FileLoader does not exist as a constructor

Having difficulty implementing a framework with three.js for an assignment. After cloning this repository and running npm install to download dependencies, the server displays TypeError: THREE.FileLoader is not a constructor. The issue appears to be relat ...

javascriptnode.jsthree.js

Using Passport authentication callback rather than redirecting the user

passport.authenticate('local-register',{ successRedirect: '/login', failureRedirect: '/path_to_greatness', })(req, res, next); In the process of developing a stateless API, I have encountered l ...

javascriptnode.jsexpresspassport.js

What is the best method in Selenium IDE for tracking an element based on its value?

While testing a website with Selenium IDE, I encountered an issue with the way elements are identified. The site utilizes something called "wickets" that change the ID of elements randomly, making it difficult for Selenium to record actions on certain elem ...

javascriptseleniumautomated-tests