Unable to associate a scope using vm. notation in controller or html

Creating an update form using a route parameter to fetch the item's ID is functioning correctly. A crucial part of this update form is fetching stored values and binding them to the form.

When setting my model like this:

<input type="text" class="form-control" id="Event_Desc" data-ng-model="eventdescription" required />

And defining my controller as shown below (noting that it calls a REST service using ng-resource).

appItem.get({
        Id: $routeParams.Id
    }, function (result) {
        $scope.eventdescription = result.Title;
    });

The field value will be correctly set to the database value on the form. However, when attempting to use vm. notation as follows, it throws an error "Unable to set property 'eventdescription' of undefined or null reference"

HTML:

<input type="text" class="form-control" id="Event_Desc" data-ng-model="vm.eventdescription" required />

Controller:

appItem.get({
        Id: $routeParams.Id
    }, function (result) {
        $scope.vm.eventdescription = result.Title;
    });

Why am I unable to set the $scope of vm.eventdescription?

Answer ā„–1

Ensure to initialize the 'vm' variable before utilizing it as shown below:

$scope.vm = {};

appItem.get({
        Id: $routeParams.Id
    }, function (result) {
        $scope.vm.eventdescription = result.Title;
    });

Answer ā„–2

Firstly, it is important to properly initialize the vm variable after you have declared your controller:

var vm = this;

Next, assign the desired value by using:

vm.eventdescription = result.Title;

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

I am having trouble with my quiz function as it only checks the answer correctly for the first question. Does anyone have suggestions on how to make it work for

Currently, I'm tackling a quiz project that was assigned to me during my bootcamp. My focus right now is on the checkAnswer function, which evaluates the answer selected by the player. const startButton = document.querySelector(".start") as ...

Guide on creating a similar encryption function in Node JS that is equivalent to the one written in Java

In Java, there is a function used for encryption. public static String encryptionFunction(String fieldValue, String pemFileLocation) { try { // Read key from file String strKeyPEM = ""; BufferedReader br = new Buffer ...

Ways to eliminate the initial digit of a decimal number if it is less than 1

I need assistance with modifying float values by removing the first number if it's lower than 1 In the "OPS" table section, I am calculating the sum of OBP and SLG obtained from a database. https://i.sstatic.net/cYwwW.jpg See the code snippet below ...

Incorporating image hyperlinks onto a designated webpage within a JavaScript presentation carousel

Working on an e-commerce website, the client has requested 3 slide shows to run simultaneously displaying specials or promotions. I have successfully set up the 3 slide shows next to each other, but I'm unsure how to incorporate image links that direc ...

Troubleshooting the issue with the htmlFor attribute

I have encountered an issue with creating radio buttons and labels using JavaScript. Despite adding the 'for' attribute in the label using 'htmlFor', it does not apply to the actual DOM Element. This results in the label not selecting t ...

The Power of JavaScript FileReader Unleashed

One of the features on my website allows users to upload images using a FileReader. Here's the code snippet that handles the file reading: $("input[type='file']").change(function(e) { var buttonClicked = $(this); for (var i = 0; i ...

Dealing with socket timeout issues in an express router

When using an express app as an API server, I want to be able to detect on the router level when a client has been disconnected due to a socket timeout. I also need to retain the response for when the client sends another request in the future. This part ...

Can an event be initiated on dynamically loaded iframe content within a document using the jQuery "on" method?

Is there a way to include mousemove and keypress events for iframes? The code provided seems to work well with existing iframes on the page, but it doesn't seem to work for dynamically created frames in the document using JavaScript. $('iframe&a ...

Execute a parent action within a Controller

I'm currently working on customizing the update() and create() actions within a specific controller in my Sails.js application. My goal is to upload a file first, store the file path (which is saved on s3 using skipper) in the request body, and then ...

Does the image alter based on the selection in the dropdown menu?

When I utilize the Templating Example from the select2 library, everything seems to work for the first dropdown value change. The correct image is previewed as expected. However, when trying to change the value a second time, a second image is appended but ...

Verify that all dynamic radio buttons have been selected prior to submitting the form

Ensuring all dynamically generated radio buttons from the database are checked before form submission is a challenge I'm facing in my Booking Project. The scenario involves selecting food packages and subpackages, where clients need to choose their pr ...

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

Having Trouble Rendering EJS Files in HTML: What Am I Doing Wrong?

I'm having trouble displaying my EJS files as HTML. Whenever I try to access my EJS file, I receive a "Cannot GET /store.html" error message. if (process.env.NODE_ENV !== 'production') { require('dotenv').config() } const stri ...

What is the best way to modify the text color within a Navbar, especially when the Navbar is displayed within a separate component?

First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...

Error: CSRF token is required for security purposes. Django and AngularJs integration requires proper CSRF token handling

Encountering an error when attempting to render my second page in the Django framework. It seems like there may be an issue with the URL and views.py files, but I'm at a standstill trying to diagnose the problem. Forbidden (CSRF token missing or inco ...

Styled-components is not recognizing the prop `isActive` on a DOM element in React

In my code, I have an svg component that accepts props like so: import React from 'react'; export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg> ) ...

Applying an angular filter to a string parameter within an ng-click function

I have created a custom angular filter directive that allows for string replacement using the syntax below: {{ 'MyValue' | replace: 'My':'Foo' }} This functionality works perfectly. Now, I am trying to use this filter within ...

Exploring Manipulation of M:N Associations in Sequelize

I have set up a sequelize schema using postgre DB export const Commune = sq.define("commune",{ codeCommune: { type: DataTypes.STRING(5), allowNull: false, primaryKey: true }, libelleCommune: { type: ...

What sets babel.config.js apart from vue.config.js and is it possible to merge both files together?

When setting up my Vue application using the Vue cli, I noticed that there was already a babel.config.js file in the directory created by the cli. However, I also added a vue.config.js file. Iā€™m curious about the difference between these two files and wh ...

The actions creator is triggered twice when using componentWillMount to dispatch actions

When I call the action creator using componentWillMount method, it seems to get called twice. You can see the screenshot below for the result. https://i.sstatic.net/1Xi1D.png This is the action creator I am using: export function fetchAdmin(){ retur ...