1. 程式人生 > >angularjs 表單點選儲存,獲取修改的資訊項,進行提示

angularjs 表單點選儲存,獲取修改的資訊項,進行提示

  一般修改的介面,會有很多資訊項要填寫,因為介面上有很多資訊項,怕使用者誤操作,直接點選儲存,導致錯誤,現在需要提供一個彈窗,將使用者剛剛修改的資訊項進行顯示出來,以便提醒使用者修改了哪些資訊項,以下是思考過程:

  一般監聽物件屬性的變化,在angularjs中可以使用watch來監聽,如下格式:

$scope.$watch('addInfo.addInfoView', function(newValue, oldValue) { 
			if(JSON.stringify(oldValue) == "{}") return;
			if (newValue === oldValue)return;
            if (newValue != null && newValue!=oldValue) {  
            	console.log("您修改了名字");
            }  
        },true); //其中true是可以進行物件屬性的比較
  但是這個,我在正常切換使用者,重新獲取使用者資訊,填寫上控制元件的資訊,這個方法就一直在執行,不好判斷是否是在點選儲存之後使用者修改了哪些資訊,所以後來想想,是否可以將點選獲取的舊的物件資料,和修改之後的新的物件資料進行比較,如下:

  1.使用copy深拷貝,獲取舊物件資料:

//拷貝一份,以便用於比較,是否修改了,2018年1月9日14:15:00
    				addInfo.addInfoViewCopy = angular.copy(json.content);
    				
  2.然後在點選提交按鈕的時候,對新的物件資料和舊的物件資料的屬性一個個進行比較,判斷修改了哪些屬性,如下,至此就可以完成判斷:
$scope.modifyRetireInfor=function(a){
			console.log("新資料"+addInfo.addInfoView.name);
			console.log("舊資料"+addInfo.addInfoViewCopy.name);
			
			//對一些重要資訊進行是否修改的判斷,2018年1月9日14:44:48
			if (addInfo.addInfoView != null ) {  
				addInfo.addInfoView.errorMessage="";
				if(addInfo.addInfoView.name != addInfo.addInfoViewCopy.name){
					addInfo.addInfoView.errorMessage="名字";
				}
				if(addInfo.addInfoView.identification != addInfo.addInfoViewCopy.identification){
					addInfo.addInfoView.errorMessage +="、身份證";
				}
				
				
            }
			
			

				$scope.resetModify();
			
			
			
		}



相關推薦

angularjs 儲存,獲取修改資訊,進行提示

  一般修改的介面,會有很多資訊項要填寫,因為介面上有很多資訊項,怕使用者誤操作,直接點選儲存,導致錯誤,現在需要提供一個彈窗,將使用者剛剛修改的資訊項進行顯示出來,以便提醒使用者修改了哪些資訊項,以下是思考過程:   一般監聽物件屬性的變化,在angularjs中可以使用

React---簡單實現提交插入、刪除操作

1 import React,{Component,Fragment} from 'react' 2 3 class App extends Component { 4 constructor(){ 5 super() // 要想使用this必須使用super 6 t

form提交按鈕後 不重新整理頁面

<form id="user"> <button id="search" onclick="save()" >儲存</button> </form> function save(){ $.post("寫入

angularjs 事件獲取 物件

<div class="provinceFont" data-ng-click="go($event)" ng-mouseenter="additemcss($event)" ng-mouseleave="removeitemcss($event)">{{y}}

驗證 靠name獲取

res 獲取 ems let nbsp jquer 手機 ear sub 表單 靠name獲取 <form class="add-form" name="form" action="#" method="post" autocomplete="on">

AngularJS驗證

json del 用戶 valid required ctr rmmod form lar AngularJS的表單驗證大致有兩種,一種是手動驗證,一種是自動驗證。 手動驗證: 是通過AngularJS表單的屬性來驗證。而成為AngularJS表單必須滿足兩個條件:1、給f

AngularJS 驗證手機號(非必填)

clas -a amp ont mit blog invalid form inpu 代碼: <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p

form框提交數據 服務器只能接受到一個數據

表單提交 form 多選 提交過去後表單中name相同的值會被後一個覆蓋,而不會被單獨識別出來。在name名稱後面加上‘[]’即可;如 name=‘user[]‘ 註意下面兩個教程的區別,我很想知道w3c怎麽讀取到的。等待指教; http://www.w3school.com.cn/tags/at

JS 實現和全不

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function checkAll(){

除錯經驗—— Excel儲存時總是彈出隱私資訊警告(Privacy Warning:this document contains macros...)的解決方法

問題: 有一個Excel檔案,每次點選“儲存”按鈕,都會彈出一個對話方塊,很是煩人。 " Privacy Warning:this document contains macros,ActiveX controls,XML expansion pack information or we

unity3d滑鼠獲取世界座標

unity中有關於滑鼠位置的函式,Input.mousePosition。但不得不說,這個函式不到位,可以用一個print函式輸出一下這個座標會發現,只有X,Y值在改變,Z值沒有發生變化,並且在螢幕的左下角固定為(0,0,0),檢視文件後發現,文件上是這麼寫的。 The current mo

選中獲取

1.HTML結構 <ul> <li> <input id="a1" type="checkbox" name="chk_art" value="it1"> <label for="a1">IT1</label>

JSP-實驗:傳值-提交並傳遞、獲取資料

JSP-實驗:表單傳值-提交表單並傳遞、獲取資料 說明: 參考連結在最後1 我這個版本執行過,反正沒大問題,但是用參考的那個網頁上的內容,就會出錯……原因也寫在後面了。 實驗 實驗內容: 利用表單傳遞資料,此題目包含01.html、01.jsp

React---簡單實現擊提交插入、刪除操作

bin submit 實現 pos def stl render extend delet 1 import React,{Component,Fragment} from ‘react‘ 2 3 class App extends Component { 4

前臺使用資料庫model和Html.BeginForm("action", "controller", FormMethod.Post)提交,在儲存到資料庫前對錶單項進行判斷的方法(一)

前端: @model DBEF.XXX  @using (Html.BeginForm("action", "controller", FormMethod.Post))     {         @Html.Valid

leaflet選中要素,設定向量樣式,要素獲取其屬性

leaflet自身沒有選擇的控制,需要自己寫程式碼實現 主要是通過featurelayer的onclick事件來設定點選要素的style,並獲取對應feature的屬性資訊 let featureLayer = L.esri.featureLayer({ url:'http://mg

vue框架通過儲存按鈕下載qrcode-vue生成的二維碼到本地

一、qrcode-vue模組        該模組是用來動態生成二維碼的vue模組外掛,<qrcode-vue></qrcode-vue>的底層其實是一個<canvas></canva

前端提交資料~php獲取內容

上圖程式碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

form提交之後,獲取返回值

有時候 使用form表單提交 不想跳轉頁面。獲取返回值 第一種方式 , 讓form 預設調整當前的iframe 即可 參考: https://www.jianshu.com/p/ccdb9415cd6b 第二種就是  引入 引用jquery-form.js檔案 https://w

Vue元素獲取當前物件

vue中在元素點選時獲取當前物件需要手動傳入當前物件 更多精彩 在點選時傳入當前物件 $event 表示當前被點選的物件 <el-menu-item v-for="submenu in