Pass ng-model as a ng-click function parameter

Question

Is that possible to pass a ng-model as a function parameter? for example:

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

....

In my case,I have more than one ng-model (6 sets), and I don't want to create 6 sets similar save functions in the controller which only the model is different, if I can pass the model as parameter, I would need to create a single save function is enough.

Answer 1

Since you are already having your model in $scope you could use it directly, otherwise Create a function in your corresponding controller like this,

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

Example:

Pass argument in ng-click

Answer 2

This is a easy and fast solution for little operations like your:

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

it is not passing parameters, but in the on-click definition you can do also normal code.

http://jsfiddle.net/cwne0stq/

Answer 3

I had a similar need. In an ionic form, I have 6 fields of same type/data for which the values could be set by button, and I didn't want to duplicate the function in the controller. I needed to be able to call a function on button click, passing a field (ng-model) name as a parameter, and wasn't working. But finally this works. Took a bit to figure it out since I'm new to angular/ionic. Hope it helps someone because there wasn't a lot of info on this.

First couple fields example:

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

});

If you need to pass a value from a button, you could add parameter:

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

And same in controller:

.controller('YourCtrl', function ($scope) {

  $scope.formdata = {};

  $scope.yourfunction = function(value,field){
    $scope.formdata[field] = value;
  }

});