Getting the value of ng-model input from controller angular js

ng-model angular 6
ng-model in angular 7
how to get textbox value in angularjs controller
ng value angular 6
ng-model angularjs
angular set input value
ng-model not working
ng-model not updating input value

I'm trying to get the value of my ng-model input to my controller. The input value has a value and not empty. Why this code is not working? It says undefined when you alert or console log. What did i missed? really appreciate your help. here is my code

input --> the value is 1

    <input type="text" name="idval" ng-model="Data.idval"> 

js

app.controller('Controller', function($scope, $http){

$scope.fetchvalue = function(){

  var id = $scope.Data.idval; // not working
  var id = $scope.idval; // even this one

  alert(id); // its undefined

    $http.post(
        "query.php", {
            'ID': id,
        }
    ).then(function(response) {

       console.log(response.data);

    });
}});

Here is a working solution for your code:

You need to declare an object and bind it to ng-model,

$scope.Data = {};

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
   $scope.Data = {};
 $scope.fetchvalue = function(){
    var id = $scope.Data.idval; // not working
    alert(id); // its undefined
 }   
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    <input type="text" name="idval" ng-model="Data.idval"> 
    <button ng-click="fetchvalue()">Submit</button>
  </form>
  </div>



</body>
</html>

ngModel, The ngModel directive binds an input , select , textarea (or custom form control) to a property on the scope using NgModelController, which is created and  The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model Directive With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

I understand,

see you defined id twice, first id get the value from ng-model which must be assigning ng-model value to id variable and you override id with undefined variable called idval.

You can either remove line var id = $scope.idval; or

modify alert(id); as alert($scope.Data.idval)

ngValue, It is mainly used on input[radio] and option elements, so that when the element is such as an input[text] or a textarea , when that element does not use ngModel. AngularJS expression, whose value will be bound to the value attribute and <script> angular.module('valueExample', []) .controller('ExampleController',  The ng-model directive can be linked to a "text area" input control and multiline strings can be passed from the controller to the view. The ng-model directive can be linked to input controls like the text and checkbox controls to make them more dynamic at run time.

You need to declare it somewhere before you use it.

$scope.DATA = ""
var id = $scope.Data.idval;

Try this out

How to use 'ng-model' in AngularJS with EXAMPLES, JS are represented by the "ng-model" directive. The text area tag is used to define a multi-line text input control. So when the first checkbox gets the value of true, the check-box will be marked for this control, and likewise,  Definition and Usage. The ng-value directive sets the value attribute of a input element, or a select element.

Angular ng-model Directive, The ng-model directive binds the value of HTML controls (input, select, textarea) to With the ng-model directive you can bind the value of an input field to a variable created in AngularJS. Example. <div ng-app="myApp" ng-controller="​myCtrl"> Examples might be simplified to improve reading and basic understanding. How to get HTML Form Input value inside Controller on Button click in AngularJS The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.

AngularJS, AngularJS ng-model Directive. ❮ AngularJS Example. Bind the value of an input field to a variable in the scope: <div ng-app="myApp" ng-controller="myCtrl"​> Binds the given expression to the value of the element. It is mainly used on input[radio] and option elements, so that when the element is selected, the ngModel of that element (or its select parent element) is set to the bound value.

Turn anything into an ng-model with ngModelController, How to execute AngularJS controller function on page load ? How to Reset an Input Value when Limit Exceeds using AngularJS ? In order to make url and email print, we have to write a valid email/url only then it would get printed. In case  Getting the form input value in AngularJS is one of the simplest and most mind-blowing amazing things, since it heavily leverages what we call Data-binding! Say we have a simple controller in Angular: [code] // Save this as mycode.js angular.mod

Comments
  • is your input value hardcoded?
  • wen is that fetchvalue called, and have you taken Data object?
  • check your controller name
  • paste your complete controller
  • wen the button is click, called the fetchvalue @Sravan
  • it works! i missed this code in my controller $scope.Data = {}; Thanks @Sravan
  • Glad to help you :).
  • i declare only id twice for showing that both of two are not working. but when in operation only one id at a time. Thanks @Kishor Pawar.
  • aha ok. That's why we expect more actual code here in post.