A guide on accessing the value of ng-model in an AngularJS controller

I am facing an issue with a simple view that contains an input text field where the user enters their name. The controller should retrieve this value and assign it to the employeeDescription variable. However, the ng-model value from the input field is not reaching the controller. I have attempted using $watch as suggested by Radim Köhler onStack Overflow, but it did not work. I believe there must be a straightforward solution to this problem.

I also tried retrieving the name variable (ng-model) directly from the $scope using

$scope.employeeDescription = $scope.name;
, but it did not fetch the value. There was no output in the Google Chrome console regarding this issue. Is there any possible solution?

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body ng-app='angularApp'>
    <div ng-controller='nameController'>
        <div>
            Name <input type="text" ng-model='name' />
        </div>

        Welcome {{employeeDescription}}
    </div>

    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

(function(angular) {
    var myAppModule = angular.module('angularApp', []);

    myAppModule.controller('nameController', function($scope) {
        $scope.employeeDescription = name;
    });

})(window.angular);

Answer №1

Your code will not work because the 'name' variable in the controller is not defined. You have two variables declared in your code: $scope.employeeDescription and $scope.name (which is defined in the ng-model of the input). It's important to note that '$scope.name' is the one being defined, not just 'name'.

Here's my suggestion: stick to using only one variable:

<div>
    Name <input type="text" ng-model='employeeDescription' />
</div>

myAppModule.controller('nameController', function($scope) {
    $scope.$watch('employeeDescription', function() {
        console.log($scope.employeeDescription);
    });
});

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

Issue with ngFor in Angular 2 causing error message in console

I'm currently following a guide to create a basic page that showcases different courses. However, I've encountered an error while testing the code in the console. The Angular 2 dependency is listed as "angular2": "2.0.0-beta.7". I have also attem ...

Attempting to minimize the repetition of code in Redux by implementing some utility functions

Is there a potential issue with the method I'm attempting in this URL: The concept involves altering only the actions file when introducing a new action. One improvement I am considering is recursively merging the status passed from the actions with ...

I want to display events from my database table on their corresponding dates using JavaScript and jQuery. How can I achieve this?

Using the FullCalendar plugin, I attempted to achieve a specific functionality, but unfortunately fell short of my goal. Below is the snippet of my scripting code: $('#calendar').fullCalendar({ //theme: true, header: { ...

What are some effective strategies for keeping content from shrinking in a drawer menu?

I am currently using a tutorial from https://www.w3schools.com/howto/howto_js_sidenav.asp to create a drawer sidebar menu. However, in my scenario, I need to include a wall of text instead of <a> links. The issue I am facing is that the text expands ...

Implementing V-model within an iteration

I am encountering an issue while trying to utilize v-model within a v-for loop, resulting in an error message. Is there a solution to make this functionality work properly? <ul class=""> <li class="" v-model="category.data" v-for="category in ...

Reveal a segment of a picture

Is there a way to display only a section of an image using either jQuery or another JavaScript method? For example: image: [ ] [ -------- ] [ - - ] [ - part - ] [ - - ] [ -------- ] [ ...

"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

I am attempting to create a unique animation for a header div that involves moving it to the top of the screen when the user scrolls down. Once the header div reaches the top, I want it to stay fixed in that position. As the header div moves upwards, it wi ...

Is there a way to create an interpolated string using a negative lookahead condition?

When analyzing my code for imports, I will specifically be searching for imports that do not end with -v3. Here are some examples: @ui/components <- this will match @ui/components/forms/field <- this will match @ui/components-v3 ...

What is the process for incorporating Angular.js with a live messaging platform such as Pusher or PubNub?

Can Pusher or PubNub be implemented as an Angular service? Anyone have any examples of code for this kind of integration? ...

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

Live monitor database changes with AJAX and SQL technology

Is there a way to implement real-time updating of user ratings on comments in an application with a connected database? I've explored various sources but the responses have been inconsistent and inconclusive. I am currently creating an app where user ...

Create a surplus of information

I'm currently working on a project where I need to replicate all the entries multiple times and then have them spin and gradually land on a color. However, I'm encountering an issue with duplicating the colors without increasing the width. How ca ...

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

Is there a way to add a class (1) when scrolling to a specific div, and then switch from class (1) to class (2) when moving away from the

How can I create a JavaScript function that adds the class "animated fadeInDown" to div id hover1 when I reach or scroll to it? Also, when I scroll down or leave div id hover1, how do I change the class from "animated fadeInDown" to "animated fadeOutUp"? ...

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

Sizing labels for responsive bar charts with chart.js

I'm encountering a problem with my bar chart created using chart.js - the responsive feature works well for some elements but not all. Specifically, the labels on my bar chart do not resize along with the window, resulting in a strange look at smaller ...

Enhancing D3 visualization with centralized alignment and mobile-friendly responsiveness

I am still quite new to JavaScript and development in general, so I may be overlooking something obvious. Although I have successfully created a chart using d3, I am struggling with positioning. No matter how much I manipulate it with CSS, the chart just d ...

Most effective method for waiting for a dropdown to load and choosing a value using Selenium in JavaScript

My current task involves interacting with a website built in React using Selenium to choose a value from a dropdown menu. Given that the website is built in React, I understand that waiting for the DOM to be ready may not always work as expected, but I st ...

stop all HTML5 videos when a specific video is played using jQuery

I am facing an issue with 10 HTML5 videos on the same page, CHALLENGE Whenever I click on different videos, they all start playing simultaneously... <div><video class="SetVideo"></video><button class="videoP"></button>< ...

Update the variables upon a click event following the completion of an AJAX request

Despite my efforts, I am unable to find a solution to the issue I am currently facing. To address this problem, I have created a script using PHP and jQuery that enables users to promote their "listings" on my website. When users visit a specific page, the ...