angularjs: event before change the radio button value

Question

How do I identify the change in value of a "radio button" before the current value change?

In my application, I need to alert the User about the effects that changing the value of this radio button will cause in the rest of form.

I've tried using ngChange and ngClick, but the value of the radio button is always changed (to the new value) even before I can do something with the current value.

Example:

       <form>
        <label>Nivel de gestão</label>
        <input name="gestao" type="radio" data-ng-model="nivelGestao" value="T" data-ng-change="mudarNivelGestao()">Tecnica
        <input name="gestao" type="radio" data-ng-model="nivelGestao" value="O" data-ng-change="mudarNivelGestao()">Operacional
        <input name="gestao" type="radio" data-ng-model="nivelGestao" value="I" data-ng-change="mudarNivelGestao()">Institucional

        <table>
            <tr>
                <td>Id</td>
                <td>Nome</td>
            </tr>
            <tr data-ng-repeat="gestor in gestores">
                <td>{{gestor.id}}</td>
                <td>{{gestor.nome}}</td>
            </tr>
        </table>

<script>
...
    $scope.mudarNivelGestao = function() {
        alert($scope.nivelGestao); // In this place the content has already been changed, but before I need to alert and ask if the User want continue, if "No" return to the last value, if "Yes" change the value and go ahead...
        ...
    }
...
</script>


    </form>

$scope.$watch('nivelGestao', function(newVal, oldVal, attr) { if(user need to change) {} else {$scope.nivelGestao=oldVal} }) you can watch for value like this — Kalhan
– Kalhan, Commented Aug 31, 2014 at 15:58

Community · Accepted Answer · 2017-05-23 10:30:11Z

1

I answered a similar question here

Just surround the radio input with label and apply the confirm logic in labels ng-click event.

<label ng-click="confirmChange($event)"><input type="radio" ng-model="value" value="foo" ></label>

$scope.confirmChange = function(event) {
  if(!confirm('sure?')) {
    event.preventDefault();
  } 
};

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 27, 2015 at 0:02

Kerem Demirer

1,2262 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gkalpak · Accepted Answer · 2014-08-31 19:37:08Z

0

You can use the mousedown event (which will fire before the click and change events).
E.g.:

<input type="checkbox" ng-model="option" 
       ng-mousedown="confirmOption($event)" />

$scope.confirmOption = function (evt) {
    var confirmMsg = 'Are you sure you want to select this ?';
    if (!$scope.option) {
        var confirmed = confirm(confirmMsg);
        $scope.option = confirmed;
    }
};

See, also, this short demo.

answered Aug 31, 2014 at 19:37

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

angularjs: event before change the radio button value

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related