CODEWITHSUNDEEP
angularjs
Andrew Kim
Andrew Kim

Reputation: 3335

can a function be used instead of event for ng model option

Say I have some input tag with the following angular associated:

<input type="text" data-ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'>

When a form with this tag gets submitted, it will update the value's name.

Is there a way to trigger updateOn when a function defined by the controller is invoked rather than an event? Or is the API only able to handle browser events?

For example:

if i have something like this:

angular.module('someModule')
  .controller('someCtrl', ["$scope", Callback])

function Callback($scope){
  $scope.updateValue = updateValue

  function updateValue(){
    console.log('will now update value')
  }
}

Is there a way to only update a model if the updateValue function gets invoked?

This won't work, but something like this?:

<input type="text" data-ng-model-options="{ updateOn: 'updateValue' }" data-ng-model='value.name'>

Upvotes: 0

Views: 164

Answers (1)

mhodges
mhodges

Reputation: 11136

You cannot pass a custom function into the updateOn property of the ng-model-options directive, however, you can have control over when things get pushed to the model, like so:

angular.module('someModule', [])
  .controller('someCtrl', ["$scope", Callback])

function Callback($scope){
  $scope.updateValue = updateValue
  $scope.value = {
    name: ""
  }
  function updateValue(form){
    console.log('will now update value')
    // form.[prop] matches name="prop" attribute on form input
    form.name.$commitViewValue();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div data-ng-app="someModule" data-ng-controller="someCtrl">
  <form name="myForm">
    <input type="text" name="name"
           data-ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'>
    {{value.name}}<br/>
    <button data-ng-click="updateValue(myForm)">Update Name</button>
  </form>
</div>

Upvotes: 1

Related Questions