如何檢測輸入字段在Angularjs中更改

現在我有一個頁面供用戶輸入一些數據，這不是表單。如：如何檢測輸入字段在Angularjs中更改

<input type='text' ng-model='ExpReport.ReportName' /> <input type='text' ng-model='ExpReport.startdate' />

有一個退出按鈕，讓用戶回到他們原來的地方。問題在於，如果用戶在輸入退出按鈕時不改變或修改任何輸入（假設他們意外地到達這裏），他們可以直接返回，但如果他們做了一些更改，如果他們想要返回，我需要顯示一個彈出框來確認他們想要離開而不保存數據。我怎樣才能抓住它？

我嘗試使用$手錶，但是好像對我不起作用：

angular.forEach($scope.ExpReport,function(value,key){ 
      $scope.$watch('value',function(oldvalue,newvalue){ 
        var currenturl = $location.path(); 
      if(currenturl.indexOf('editreport')>-1){ 
      $scope.$on('$locationChangeStart', function(event,next,current) {  
       event.preventDefault(); 
       $scope.existconfirm = true; 
       if(next.indexOf('editreport')>-1) { 
       $scope.existconfirm = false; 
       }  
       }); 
      } 
      }) 
     })

來源

2015-04-29 linyuanxie

https://docs.angularjs.org/api/ng/directive/ngChange？ – Ronnie

這是不是很清楚你在這裏試圖做什麼。您列出了一對綁定到「ExpReport」屬性的輸入框，以及一段代碼角度代碼，它提示範圍中可能有多個「ExpReport」，您似乎正在觀看其中的每一個屬性，名爲「value」「這甚至不是輸入框之一。 – Claies

我認爲這個問題已經在這裏找到答案。

Detect unsaved data using angularjs

來源

2015-04-29 22:59:58 Scott

該答案鏈接到這個答案：http://stackoverflow.com/questions/14852802/detect-unsaved-changes-and-alert-user-using-angularjs –

鏈接到另一個答案的意圖是顯示使用骯髒的國旗以及如何使用，而不是用勺子給用戶提供罐裝答案。給一個男人一條魚，你喂他一天，教一個男人去釣魚，你給他的生命 – Scott

（如果使用的用戶界面的路由器或 '$ stateChangeStart'）事件添加事件偵聽到 '$ locationChangeStart'。當它發生火災時，你可以提示用戶確保他們想要失去所有的改變。

$scope.$on('$locationChangeStart', function (event) { 
    if(userHasUnsavedChanges() && !confirm('Are you sure you want to abandon your changes?')){ 
     event.preventDefault(); 
    } 
});

來源

2015-04-29 23:01:34 HankScorpio

雖然這可能有效，但它並沒有真正回答問題，因爲在問題中沒有跡象表明海報甚至使用'$ stateChangeStart'所屬的'ui-router'插件。 – Claies

已更新。更好？ – HankScorpio

我認爲這正是問題作者需要做的事情：保留舊數據的副本，然後根據@HankScorpio建議的路線更改檢查新的表單數據。 –

如何檢測輸入字段在Angularjs中更改

回答

相關問題