What is the best way to retrieve an ng-model parameter within a controller?

I'm working on implementing a PUT method in my controller and need to bind the new value back to it. I've tried:

        <div ng-app="myApp" ng-controller="personCtrl">
        <form>
         First Name: <input type="text" ng-model="firstName"><br>
         Last Name: <input type="text" ng-model="lastName"><br>
         <button ng-click="UpdateProfile()"> Update </button>
         </form>
         </div>

And then updated my controller like this:

       <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
        $scope.firstName = "Leo";
        $scope.lastName = "Messi";
        $scope.UpdateProfile = function()
           {
               $scope.newFirstName = firstName
           }
        });
    </script>  

However, I encountered an error stating that firstName is not defined. Any suggestions or tips would be greatly appreciated.

Answer №1

Here is the revised code snippet:

let updateUserProfile = () => {
       let newFirstN = firstName;
}

Answer №2

If you want to customize it, you can implement some modifications to make it work for your unique requirements..
Within the controller:

$scope.EditName = function(newName)
{
    $scope.newName = newName
}

In the HTML file:

<button ng-click="EditName(newName)"> Save Changes </button>

Answer №4

When writing your code, make sure to attach firstName to the $scope variable as it is an object internally and firstName is one of its properties.

For instance, if you create a testApp module with a testController and add a property test1 to it, you can log the entire $scope object in the console. // Your code goes here

var app = angular.module('testApp', []);
app.controller('testController', testController);
testController.$inject = ['$scope'];

function testController($scope) {
  $scope.test1 = "plunkr";
  console.log($scope);
}

https://i.stack.imgur.com/Bg3xy.png

Therefore, make sure to access firstName as a property of the $scope object rather than treating it as a separate variable. Your code should look like this:

$scope.firstName = "Leo";
$scope.UpdateProfile = function() {
    $scope.newFirstName = $scope.firstName;
}
});

Check out the live preview here

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

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

Error: Reference 'ref' is undefined in the 'no-undef' context. I am interested in experimenting with loading images from Firebase storage

While working with React, I encountered an issue when trying to fetch an image URL from Firebase Storage and display the image. The error 'ref' is not defined (no-undef) occurred. https://firebase.google.com/docs/storage/web/create-reference Th ...

When using Selenium to locate an element, it appears to be returning an unexpected empty object

This question has been bothering me for quite some time. I am currently using Selenium in conjunction with Python to find an element within a webpage. The specific element I am targeting is as follows: <a id="topmenu_adhocQtraditional_Reports" ...

What is the process for generating an HTTP response that results in a pipe error being thrown

In my NestJS application, I have created a custom pipe that validates if a given value is a valid URL. If the URL is invalid, an error is thrown. This pipe is utilized in a controller to save an item into the database. Recently, I discovered that the pipe ...

What is the importance of fulfilling a promise in resolving a response?

I have a promise structured as follows: let promise = new Promise((resolve, reject) => { axios.post("https://httpbin.org/post", params, header) .then(response => { resolve(Object.assign({}, response.data)); // resolve("aaaa"); ...

Vue displays error logs within Karma, however, the test failure is not being reflected in the Karma results

Currently, I am in the process of writing unit tests for Vue components within our new project. For testing, I am utilizing Karma with Mocha + Chai, and PhantomJS as the browser. The test command being used is cross-env BABEL_ENV=test karma start client/ ...

Adjust the node's location in Cytoscape.js

I recently switched from using Cola to fCose in Cytoscape.js for graphing multiple graphs with no connections. With Cola, I was able to manually set node positions by tweaking the layout options. However, with fCose, despite adjusting variables like quali ...

retrieve JSON information using JSONP

Currently, I am working with a URL that returns data in JSON format. Here is the URL: http://10.0.1.11/render?target=threshold(400,test)&from=-1mins&format=json&jsonp=? When I enter this URL into a browser, it displays the following JSON re ...

Retrieve an array of information from a firestore database query

I am encountering an issue while trying to retrieve information about all users who are friends of a specific user. I have attempted to gather the data by pushing it to an array and then returning it as a single JSON array. However, it seems that the dat ...

How can checkboxes be combined from two separate tables?

Within this interactive code example, you will find two tables containing checkboxes in each row. Upon clicking the To button, a dialog box will appear allowing you to select users or groups from a drop-down menu. The corresponding tables will then be dis ...

Display a loading dialog when an AJAX request is made

I am working on a Grails application and I would like to implement a visual indicator, such as a modal dialog, to show when an AJAX request is in progress. Currently, I rely on JQuery for all my AJAX requests. While they are triggered using Grails tags at ...

What is the method for developing a Typescript-connected High-Order React Component with Redux?

I am looking to develop a React Higher-Order Component that can safeguard routes within my application from unauthorized users without an access token. I aim to use this HOC to wrap a Component like so in the parent component: <Route exact path ...

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

How can I successfully implement the Add To Calendar Button Package?

Recently, I decided to incorporate this particular component into my application. Although it seemed simple enough at first, I'm now faced with a puzzling TypeError originating from within the package. The react component I am constructing is as foll ...

Has the HTML attribute 'step' stopped functioning properly?

I'm currently working on an Angularjs project that primarily uses material design. I am trying to set up a timepicker using the input control with the type=time attribute. However, I want to restrict the user to select times only within a 30-minute ra ...

What is the best way to incorporate template literals (` `) into existing template literals?

I am facing a unique challenge where I need to utilize a template literal within another template literal, but I am struggling to make it work. The code snippet in question looks like this: <p>Something something <a href={`${SOMELINK}/blah`}> ...

Tips on deleting CSS comments from a CSS file

Currently, I am utilizing nextjs + reactjs. My objective is to eliminate all CSS comments from my existing css file. Despite using next-purgecss in order to get rid of unnecessary CSS code, the comments are still persisting. What could be the reason behind ...

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

I am looking to create a hover effect on a div element that has a background-color, background-image, and text. What I want is for the background-image to slowly disappear when the div is hovered over, while keeping the text and background color visible. I ...

Ordering a string of whole numbers using JavaScript

I'm currently working on a form that takes a string of numbers, splits them at each semi colon and space, sorts the numbers, and then displays the sorted list. However, when I click the button, the value in the text box doesn't get posted. Can ...

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...