将ng模型值传递到ng单击失败

Pass ng-model value into ng-click failed

本文关键字：ng 单击 失败 值传 模型      更新时间：2023-09-26

如何将ng模型的值传递给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>

为什么在我的提交函数中它没有得到用户名的值？

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

您不需要将username作为参数传递给函数。您已经可以在函数中从$scope.username获取username值。

以下是正确答案：

更正了alert中的"用户名"，并且在定义方法时不应使用附带$scope.submit = function() { }

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

您还必须在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>

有一些遗漏和拼写错误。

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>

这是更新的Demo

您的代码中存在一些错误

下面，找到固定代码

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>

控制器

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

小提琴中存在错误

请更新您的提交方法如下

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

您在$scope.submit后面使用括号((，这是函数的无效声明。

还为类似的ng应用程序命名

<div ng-app="myApp">

并且内部提醒正确给出变量名称，说明您在变量名称中存在拼写错误。

缺少对ng-app属性的删除。试试这个：

<div ng-app='myApp'>

此外，请更正您的函数名称和参数拼写错误：

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

这是您的需求示例。只需在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>

相关文章：