CODEWITHSUNDEEP
javascriptangularjs
Eunice Chia
Eunice Chia

Reputation: 355

Pass ng-model value into ng-click failed

How to pass ng-model's value to ng-click? 

<div ng-controller="TodoCtrl">
  <input type="text" ng-model="username">
  <button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>

Why in my submit function it doesn't get the username's value?

http://jsfiddle.net/U3pVM/26604/

Upvotes: 0

Views: 1670

Answers (7)

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

This is an example of your requirement. Just test on my snippet sending value on alert().

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.submit = function(mymdl){
  alert(mymdl);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="mymdl"/>
  <button ng-click="submit(mymdl)">Submit</button>
</div>

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

There are some missings and spelling errors.

var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
  $scope.submit = function(username){
  	alert(username) //get username here
    console.log("username", username)
  }
});
<div ng-app ="myApp">
  <div ng-controller="TodoCtrl">
      <input type="text" ng-model="username">
             <button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Here is the updated Demo

Upvotes: 1

Noldor
Noldor

Reputation: 1182

You don't need to pass username as a parameter to your function. You can get the username value from $scope.username in your function already.

Upvotes: 2

Shwetha
Shwetha

Reputation: 903

Here is the correct answer:

Corrected the 'username' in alert and also while defining the method should not use paranthesis $scope.submit = function() { }

var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
  $scope.submit = function(username){
    alert(username) //get username here
  }
});

Also you have specify the module name in the html:

<div ng-app='myApp'>
  <div ng-controller="TodoCtrl">
      <input type="text" ng-model="username">
             <button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
  </div>
</div>

Upvotes: 1

AranS
AranS

Reputation: 1891

There is a missing decleration of your ng-app attribute. Try this:

<div ng-app='myApp'>

In addition, correct your function name and argument typo:

$scope.submit = function(username){
    alert(username) 
  }

Upvotes: 0

Dinesh Shah
Dinesh Shah

Reputation: 1233

there are errors in your fiddle

please update your submit method as below 

  $scope.submit = function(username){
    alert(username) //get username here
  }

You are using parenthesis () after $scope.submit which is invalid declaration for function.

also give name to ng-app like 

<div ng-app="myApp">

and inside alert give variable name properly , you have done spelling mistake in variable name.

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

There are some errors in your code

Below, find the fixed code

HTML

<div ng-app="myApp">
  <div ng-controller="TodoCtrl">
      <input type="text" ng-model="username">
      <button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
  </div>
</div>

CONTROLLER

var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
    $scope.submit = function(username){
        alert(userame) //get username here
    }
});

Upvotes: 0

Related Questions