I want to compare that old and new value are same or not for input textbox in angularjs?

Question

I have two input box in angularjs html structure. When I click on my button or a tag I want my textbox old and new value in angularjs or I want to compare that old and new value are same or not. I'm using angular 1.4.7.

<input phone-input ng-show="mode == 'edit'" ng-model="leader.work"/>
<input phone-input ng-show="mode == 'edit'" ng-model="leader.mobile"/>

<a ng-show="mode == 'edit'" ng-click="mode = null;save_profile(leader)" style="cursor: pointer" title="Save">Save</a>

$scope.save_profile = function (leader) {
  /* How to get/compare both text box old and new value are same or not*/
};

I assume that you want to compare original values which are in the textboxes in the time of load with final variables which are in textboxes when you press the button. Am I correct? — stjepano, Mar 19 '16 at 09:56

Pavan Teja · Accepted Answer · 2016-03-19T10:54:08.150

try this

function TodoCrtl($scope) {

  $scope.newValue = 'Initial Text';
  $scope.save_profile = function(newvalue, oldvalue) {

    //Here you can access old value and new value from scope.
    $scope.new = 'New Value :' + $scope.newValue;
    $scope.old = 'Old Value :' + $scope.oldValue;

    //After accessing update the scope old value to new value with function parameters
    $scope.newValue = newvalue;
    $scope.oldValue = newvalue;

  };

  $scope.changeValue = function() {

    $scope.newValue = 'Dynamic Change';
  };

}

<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>ng-click</title>
</head>

<body>

  <div ng-controller="TodoCrtl">

    <input type=text ng-model="newValue" ng-init="oldValue=newValue">
    <button ng-click="save_profile(newValue,oldValue)">Save</button>
    <div>{{new}}</div>
    <div>{{old}}</div>

    <br>
    <button ng-click="changeValue()">Change Dynamic</button>

  </div>

</body>

</html>

Won't this work only on first page load? For example user can dynamically load `leader` using AJAX — stjepano, Mar 19 '16 at 10:05

stjepano · Answer 2 · 2016-03-21T09:21:32.973

The simplest possible approach which will work in all occasions is to make a copy of the leader when you load it and compare current leader with the copy you made when you press the button.

function TodoCtrl($scope) {

  // initialization
  var originalLeader = null;
  $scope.leader = null;
  $scope.mode = 'edit';

  // this is where you get your leader data, in my example 
  // I simply set it to demo data but you can load the
  // data using AJAX for example
  var loadLeader = function() {
    var leaderData = {
      mobile: '000',
      work: '111'
    };
    originalLeader = angular.copy(leaderData);
    $scope.leader = leaderData;
  }

  // loadLeader will be invoked on page load
  loadLeader();

  $scope.save_profile = function (leader) {
    // you have access to your original data and current data,
    // you can compare them and do whatever you want with them
    console.log('originalLeader ', originalLeader);
    console.log('leader ', leader);

    // for example
    if ( leader.mobile != originalLeader.mobile ) {
      alert('Mobile has changed from ' + originalLeader.mobile + ' to ' + leader.mobile);
    }
  };
}

Some answers suggested to use $scope.$watch, you can implement your solution using that but you need to be careful as the $scope.$watch callback will be invoked on each change. To illustrate what I mean let's add something like this to your code:

$scope.$watch('leader.mobile', function(newVal,oldVal) {
  console.log('newVal ', newVal);
  console.log('oldVal ', oldVal);
});

Let the leader.mobile be 000 at the init time.

You type 1 to the text box, now leader.mobile is 0001, the callback function will be invoked and the log will be:

newVal  0001
oldVal  000

Now you press backspace and delete 1 you previously typed, the leader.mobile variable is now 000 and the log is:

newVal  000
oldVal  0001

Your current data is same as starting data but the $scope.$watch was invoked twice and is difficult to determine if data has really changed or not. You would need to implement some additional code for that, something like this:

// be careful about this, you need to set to null if you reload the data
var originalMobile = null;

$scope.$watch('leader.mobile', function(newVal,oldVal) {
  // set originalMobile to value only if this is first 
  // invocation of the watch callback, ie. if originalMobile
  // was not set yet
  if ( originalMobile == null ) {
    originalMobile = oldVal;
  }
});

$scope.save_profile = function(leader) {
  if ( leader.mobile != originalMobile ) {
    // ...
  }
}

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

You can use the $watch function. The link below will show you how to implement it. You can get an old and new value with it.

How do I use $scope.$watch and $scope.$apply in AngularJS?

edited May 23 '17 at 10:27

Community

1
1

answered Mar 19 '16 at 09:36

Ross Rawlins

603
8
22

He want's to compare values when the button is clicked ... you should probably review your answer ... – stjepano Mar 19 '16 at 09:40
you can get the old and new value using the watch then compare them in the watcher function. Why is that wrong? – Ross Rawlins Mar 19 '16 at 09:45
You are suggesting that he adds `$scope.$watch` on `leader.work` and `leader.mobile` which will be called on each change while he wants to compare original values (not intermediary) with final values (which are in textboxes when he clicks on the button) – stjepano Mar 19 '16 at 09:48
I read the question again, comparison of original values with final values is my assumption as this is not clear from the question, but this seems reasonable to me – stjepano Mar 19 '16 at 09:54

I want to compare that old and new value are same or not for input textbox in angularjs?

3 Answers3