Question

是否可以将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模型（6套），我不想在控制器中创建6组类似的保存功能，只有模型不同，如果我可以将模型作为参数，我需要创建一个单独的保存功能就足够了。

Answer 1

由于您已经在$ scope中使用了模型，因此可以直接使用它，否则在相应的控制器中创建一个函数，如下所示，

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

示例：

Pass argument in ng-click

Answer 2

对于像您这样的小型操作，这是一个简单快捷的解决方案：

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

它没有传递参数，但在点击定义中你也可以使用普通代码。

http://jsfiddle.net/cwne0stq/

Answer 3

我有类似的需求。在离子形式中，我有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>

在控制器中：

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

});

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

3 个答案: