Having trouble retrieving the value from the input field with Angular.js

I am having trouble retrieving the value from an input field using Angular.js. Below is the code explanation.

Here is my controller code:

$scope.shipping=0;
$scope.addProductInfoData=function(billdata){
        console.log('valid',$scope.shipping);
}

And this is my view part:

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Shipping charge :</span>
<div ng-class="{ 'myError': billdata.ship.$touched && billdata.ship.$invalid }">
<input type="text" name="ship" id="shippingcharge" class="form-control" placeholder="Add shipping charge" ng-model="shipping" ng-keypress="clearField('shippingcharge');" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
<div style="clear:both;"></div>
</div>
</div>
<div class="help-block" ng-messages="billdata.ship.$error" ng-if="billdata.ship.$touched || billdata.usp.$error.pattern">
<p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9).</p>
</div>
<input type="button" class="btn btn-success" ng-click="addProductInfoData(billdata);"  id="addProfileData" value="Add"/>

Upon clicking the add button, I should see the shipping value as 0 in the console message. However, it currently shows as undefined. Can someone please assist me in resolving this issue?

Answer №1

Your shipping_status has not been defined, which is why it currently shows as undefined. This could be due to a typo in the variable name or because you meant to reference $scope.shipping.

To correct this issue, update your code from:

console.log('valid',$scope.shipping_status);

to:

console.log('valid',$scope.shipping);

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

The updates made to a form selection using Ajax do not reflect in jQuery's .serialize or .val functions

When using the .load jQuery function to retrieve a form and place it in the document body, I encounter an issue. After loading the form, I manually change the select value and attempt to save the form using an ajax .post request. However, when trying to ...

How to automatically disable a button in reactjs when the input field is blank

I have a component called Dynamic Form that includes input fields. The challenge I am facing is how to disable the submit button when these input fields are empty, although the validateResult function fails to return false. import cn from "classname ...

The Node.js script functions correctly on the first run but encounters failure in subsequent executions

I am in need of a Node.js script that can perform the following tasks: 1 - Trigger when an image is added to a specific S3 bucket. 2 - Generate a thumbnail of that image (360x203 pixels). 3 - Store a copy of the thumbnail in a separate S3 directory. ...

View Preview Image using the following image tag in JavaScript

I am trying to display an image preview using the img tag that is placed after my input field. Here is my HTML: <input name="image" type="file" id="uploadImage" onchange="PreviewImage(this);" /> ...

Incorporating an array attribute into a current array of elements

I am currently attempting to incorporate the days of the week into an existing array of objects. To give you a visual representation, check out this image: https://i.stack.imgur.com/0jCBF.png After filtering my array to only yield 7 results, I aim to assi ...

issue with manipulating URLs in Express routing

Looking for assistance with Express routing. I want users to only see localhost:3000/page2 when they go to /page2, instead of localhost:3000/page2.html I have three HTML pages - page1.html, page2.html, and page3.html. I've created a server using Expr ...

What is the best way to set up jest to generate coverage reports for Selenium tests?

I recently made the switch to using jest for testing my JavaScript project after encountering coverage issues with mocha and chai. While my unit tests are providing coverage data, my Selenium tests are not. I've tried various solutions found in outdat ...

Tips for replacing spaces with &nbsp; in a string using ReactJS and displaying it in HTML

<div className="mt-2 font-sidebar capitalize"> {item.title} </div> item.title can vary and be any string retrieved from the backend, such as "all products", "most liked", "featured items", etc. I am looking for a solution to subst ...

What is the best way to parse a JSON file in Angular?

Can you please explain how to read a JSON file? I have been able to successfully read a JSON file using a controller, but when I try to read it from a factory, the content is null. Why is this happening? http://plnkr.co/edit/THdlp00GuSk1NS6rqe5k?p=preview ...

My AngularJS service is not functioning properly. Can someone help me troubleshoot the issue?

My module: angular.module("aps", [ "ngAnimate", "ngTouch", "ui.grid", "ui.grid.saveState", "ui.grid.selection", "ui.grid.cellNav", "ui.grid.resizeColumns", "ui.grid.moveColumns", "ui.grid.pinning", "ui.bootstrap", "ui.grid.autoResize" ]); My serv ...

How can you use a single parameter in a JavaScript function to swap the values of two numbers

Here's the challenge I'm facing: I need to create a function that will output 5 when given a(0), and 0 when given a(5). a(0) = 5 a(5) = 0 It should look like this: Hint: Use the following function structure function A(num){} something ...

When attempting to delete a resource using an HTTP request in Insomnia, I encountered a TypeError stating that it was unable to read the property 'id'

I recently started using Express and am in the process of setting up the Delete function for my database within the MERN stack. While testing my CRUD operations using Insomnia, I have encountered an issue specifically with the Delete operation. The proble ...

Encountering issues with the functionality of the MUI Select component, causing the application to crash during

The issue has been successfully resolved I have been in the process of constructing a modal that includes a form and incorporating the MUI Select component. However, upon opening the modal, the application encounters an error; removing the Select componen ...

steps to extract routing into its own component

Is it possible to extract this routing logic into a separate component? I attempted to use map but it didn't work I want to have only a single route, and change the 'path' when a specific link is clicked const Home = ({ code }) => { re ...

Having trouble with ng-options not displaying in SELECT dropdown

Having some trouble getting the States to display correctly in a Select using ng-options. Being new to Angular, I'm not seeing the desired outcome. Controller $scope.statesList = function () { StatesList.query(function (states) { ...

Passing Props in Material-UI v5xx with ReactJS: A Beginner's Guide

Struggling with the fact that useStyle() isn't functioning properly in my material-UI v5xx version, I found myself at a loss on how to pass props in this updated edition. In Material-UI v4, it was as simple as: const Navbar = () => { const [open ...

Setting the value for a HiddenField using jQuery in an ASP.NET application

Is there a way to set a value for a HiddenField control using jQuery? function DisplayContent(obj) { var FareValue = $(obj).closest('tr').find("[id*=lbFare]").text(); $(obj).parent().parent().find('[id*=pnlGrd]').show(); $ ...

Resize a group of images to match the parent's width and height dimensions

I am working with a div that contains variously-sized images and is nested inside a parent container. <div id="parentContainer"> <div id="boxToScale"> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/150 ...

Monitor the $scope within a factory by utilizing the $http service in AngularJS

I'm attempting to monitor a change in value retrieved from a factory using $http. Below is my factory, which simply retrieves a list of videos from the backend: app.factory('videoHttpService', ['$http', function ($http) { var ...

Incorporating various language URLs in Next.js using next-i18n-next functionality

Thinking about using the next-i18next internationalization library. Check out next-i18next on GitHub Curious about how to change the language in the path of my URL. For example: /about-us /over-ons -> takes you to the Dutch version of the about us p ...