我想比较angularjs中输入文本框的旧值和新值是否相同?

时间:2016-03-19 09:32:07

标签: javascript angularjs html5

我在angularjs html结构中有两个输入框。 当我点击我的按钮或标签时,我希望我的文本框在angularjs中有旧的和新的值,或者我想比较旧的和新的值是否相同。 我正在使用棱角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*/
};

3 个答案:

答案 0 :(得分:3)

试试这个

import itertools

def sorted_tuples(length, max_s):
    nums = [0]
    for s in range(max_s):
        for p in itertools.combinations_with_replacement(nums, length):
            if s in p or -s in p:
                yield p
        nums = [-(s+1)] + nums + [s+1]

for i in sorted_tuples(3,2):
    print(i)

# prints the following
(0, 0, 0)
(-1, -1, -1)
(-1, -1, 0)
(-1, -1, 1)
(-1, 0, 0)
(-1, 0, 1)
(-1, 1, 1)
(0, 0, 1)
(0, 1, 1)
(1, 1, 1)
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';
  };

}

答案 1 :(得分: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.mobile

000在初始时为1

您在文本框中输入leader.mobile,现在0001newVal 0001 oldVal 000 ,将调用回调函数,日志将为:

backspace

现在按1并删除之前输入的leader.mobile000变量现在为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 ) { // ... } } 被调用了两次,很难确定数据是否真的发生了变化。您需要为此实现一些额外的代码,如下所示:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="@dimen/abc_action_bar_default_height_material">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_edit"

            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="ABC"
            android:gravity="center"
            android:layout_weight="1"
            android:textColor="@android:color/white"

            />
        <ImageView
            android:layout_width="wrap_content"
            android:paddingRight="10dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_edit"/>
    </LinearLayout>
</android.support.v7.widget.Toolbar>

答案 2 :(得分:0)

您可以使用$ watch功能。以下链接将向您展示如何实施它。你可以用它获得旧的和新的价值。

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