将ng-model值传递到ng-click失败

Question

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/

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

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) 
  }

Answer 5

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
    }
});

Answer 6

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.

Answer 7

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>