传递ng-model作为ng-click函数参数

Pass ng-model as a ng-click function parameter

本文关键字：函数 参数 ng-click 作为 ng-model 传递      更新时间：2023-09-26

是否可以将ng-model作为函数参数传递?例如:

<input type="text" ng-model="myModel">
<button ng-click='save('button1', myModel)'>save</button>
<button ng-click='save('button2', myModel)'>save</button>
<button ng-click='save('button3', myModel)'>save</button>

....
var save = function(buttonIndex, myModel){
   myModel = buttonIndex + ' clicked';
}
....

在我的情况下，我有一个以上的ng-model(6组)，我不想在控制器中创建6组类似的保存函数，只有模型不同，如果我可以传递模型作为参数，我需要创建一个保存函数就足够了。

既然你已经有你的模型在$作用域，你可以直接使用它，否则在相应的控制器中创建一个函数，像这样，

$scope.save = function(model) {
//do whatever you want
}

的例子:

Pass argument in ng-click

对于像:

这样的小操作，这是一个简单快速的解决方案。
<input type="text" ng-model="myModel">
<button ng-click="myModel='button1 clicked'">save1</button>
<button ng-click="myModel='button2 clicked'">save2</button>
<button ng-click="myModel='button3 clicked'">save3</button>

它不传递参数，但在on-click定义中，您也可以执行正常代码。

http://jsfiddle.net/cwne0stq/

我也有类似的需求。在离子形式中，我有6个相同类型/数据的字段，其值可以通过按钮设置，并且我不想复制控制器中的功能。我需要能够在按钮单击时调用函数，传递字段(ng-model)名称作为参数，并且不工作。但最终这是可行的。花了一点时间才弄明白，因为我是角/离子的新手。希望它能帮助到一些人，因为在这方面没有很多信息。

前两个字段示例:

<div class="item item-input-inset">
  <label class="item item-input-wrapper">       
  <i class="icon ion-edit placeholder-icon"></i>
  <input type="text" placeholder="00:00" ng-model="formdata.time1">
  </label>
  <button class="button" ng-click="settime('time1')">Now</button>
</div>
<div class="item item-input-inset">
  <label class="item item-input-wrapper">       
  <i class="icon ion-edit placeholder-icon"></i>
  <input type="text" placeholder="00:00" ng-model="formdata.time2">
  </label>
  <button class="button" ng-click="settime('time2')">Now</button>
</div>

And in controller:

.controller('YourCtrl', function ($scope) {
  $scope.formdata = {};
  $scope.settime = function(field){
    var d = new Date();
    $scope.formdata[field] = d.getUTCHours()+':'+(d.getUTCMinutes() < 10 ? '0'+d.getUTCMinutes():d.getUTCMinutes());
  }
});

如果你需要从按钮传递一个值，你可以添加参数:

<div class="item item-input-inset">
  <label class="item item-input-wrapper">       
  <i class="icon ion-edit placeholder-icon"></i>
  <input type="text" ng-model="formdata.yourfield">
  </label>
  <button class="button" ng-click="yourfunction('This Value','yourfield')">This</button>
  <button class="button" ng-click="yourfunction('That Value','yourfield')">That</button>
</div>

控制器也是一样:

.controller('YourCtrl', function ($scope) {
  $scope.formdata = {};
  $scope.yourfunction = function(value,field){
    $scope.formdata[field] = value;
  }
});
相关文章：