Get old value and new value from dropdown

Question

I'm trying to simply get the previous value, and the newly selected value from a drop-down. In this example, the drop-down is pre-populated with the current group the user is assigned.

When the drop-down is changed, I want to be able to return the old value and the new value. I can already get the old value, but I don't know how to return the new value.

Controller Code:

// User Object
userAccess = [{"user_name":"dodsosr11",
                  "group_level":1,
                  "user_id":500,
                  "group_id":10,
                  "group_name":"Conferences_Admins"},
              {"user_name":"keatikj09",
                  "group_level":1,
                  "user_id":250,
                  "group_id":10,
                  "group_name":"Conferences_Admins"},
              {"user_name":"malinag10",
                  "group_level":1,
                  "user_id":492,
                  "group_id":10,
                  "group_name":"Conferences_Admins"}];

//Group Object
groupAccess = [{"group_name":"Conferences_Admins",
                   "id":10,
                   "level_id":1},
               {"group_name":"ticket_sales",
                   "id":59,
                   "level_id":3},
               {"group_name":"Web Developers",
                   "id":1,
                   "level_id":1}];


$scope.reassignUser = function(){
    var oldGroup = this.user.group_id;
    var newGroup = ?????

};

HTML:

<tr ng-repeat="user in userAccess">
    <td>{{ user.user_name}}</td>
    <td>
        <select ng-change="reassignUser()" 
                ng-model="user.group_name" 
                ng-options="g.group_name as g.group_name for g in groupAccess">
        </select>
    </td>
</tr>

I've created a fiddle here using the watch example that was provided in the first response below. http://jsfiddle.net/LHz9D/1/

Hereafter

Answer 1

Try like this

View

<select ng-model="selected" ng-change="change(selected, {{selected}})">

JS

$scope.change = function(newObj, oldObj){
   console.log(newObj);
   console.log(oldObj);
}

Eisenhower

...if you change to ng-change="change(selected, {{selected || 'null'}})", angular won't complain if selected isn't set originally because when it's not set, angular tries to execute change(selected, ) which leads to a js error and stops code execution – Impartial

This is a great solution, but I don't understand why it works. Does {{}} just pass the literal before the object change occurs? – Bent

Answer 2

you could use ng-click, since click happens before change you could there register the old value like this

<select ng-model="selected" ng-change="change(selected, oldValue)" ng-click="oldValue = selected">

and in the controller

$scope.change = function(newValue, oldValue){
    //do if's in case you use null or empty values
    if ( oldValue ) {
        //do something
    }   
    if ( newValue ) {
        //do something
    }
}

Shaky

This is only helpful when using one single input/select field – Hyposensitize

Also you should not use ng-click because if you select the input text instead of clicking inside the input field this event will not get fired. Instead, you should use ng-focus! – Hyposensitize

Answer 3

Do it like this:

$scope.$watch('user.group_name', function(newValue, oldValue){

});

No need to use ng-change any more

Coinsurance

if I throw an alert in there to display the oldValue and the newValue, the alert triggers when the table is rendered- but when I actually change the dropdown it doesn't fire, though elsewhere I can see the user.group_name is updated. – Hereafter

@Hereafter it's because you have ng-repeat. Then you shall watch for each user in userAccess – Coinsurance

@Hereafter for example, $scope.$watch('user[0].group_name', ... will watch for first user's group_name property – Coinsurance

If I do that, I'm getting an error, after the table renders and displays the first alert: Error: [$rootScope:inprog] errors.angularjs.org/1.2.10/$rootScope/inprog?p0=%24digest – Hereafter

I also wouldn't know how many users to watch, as it's completely variable – Hereafter