2016-03-19 15 views
1

我在angularjs html結構中有兩個輸入框。 當我點擊我的按鈕或標籤時,我想要我的文本框中的angularjs的舊值和新值,或者我想比較新值和新值是否相同。 我使用的是角1.4.7。我想比較舊的和新的值是否相同或不是在angularjs中的輸入文本框?

<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*/ 
}; 
+0

對於該文本框在這兩個文本框,你想這樣做 –

+0

我假設你要比較它們在文本框原始值按下按鈕時加載文本框中最終變量的時間。我對麼? – stjepano

回答

3

試試這個

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>

+0

這不僅僅適用於第一個頁面加載?例如,用戶可以使用AJAX動態加載'leader' – stjepano

+0

@stjepano其作品,即使這樣,檢查更新片段 –

+0

是的,它的工作原理,+1 – stjepano

0

您可以使用$ watch功能。下面的鏈接將告訴你如何實現它。你可以用它獲得新的和新的價值。

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

+0

他希望比較單擊按鈕時的值......您應該查看您的答案...... – stjepano

+0

您可以使用手錶獲取舊值和新值,然後在觀察器功能中比較它們。爲什麼這是錯的? –

+0

你建議他在'leader.work'和'leader.mobile'上增加'$ scope。$ watch',它將在每次更改時調用,同時他想將原始值(不是中間值)與最終值(它們是在文本框中,當他點擊按鈕時) – stjepano

1

最簡單的辦法,將在所有場合的工作是使leader的副本,當你加載它,並比較當前leader與您按下按鈕時製作的副本一起使用。

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

一些答案建議使用$scope.$watch,可以實現用你的解決方案,但你必須要小心,因爲$scope.$watch回調將在每個變化被調用。爲了說明我的意思,讓我們添加一些像這樣的代碼:

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

leader.mobile000在初始時間。

您鍵入1文本框,現在leader.mobile0001,回調函數將被調用,並且日誌將是:

newVal 0001 
oldVal 000 

現在你按backspace和刪除1你以前鍵入的leader.mobile變量現在000和日誌:

newVal 000 
oldVal 0001 

您當前的數據是一樣的首發數據,但$scope.$watch被調用了兩次,並且很難確定數據是否真的發生了變化。你會需要實現,像這樣一些額外的代碼,東西:

// 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) { 
    // ... 
    } 
} 
相關問題