ng-change รับค่าใหม่และค่าเดิม


118

ฉันใช้ ng-options เพื่อเลือกค่าจากแบบดึงลง ฉันต้องการเปรียบเทียบค่าเก่ากับค่าใหม่ได้ ng-change ทำงานได้ดีสำหรับการดึงค่าใหม่ของการดึงลง แต่ฉันจะรับทั้งค่าใหม่และค่าเดิมได้อย่างไร

<select ng-change="updateValue(user)" ng-model="user.id" ng-options="user.id as user.name for user in users"></select> 

ตัวอย่างเช่นสมมติว่าฉันต้องการให้คอนโทรลเลอร์บันทึก "ชื่อผู้ใช้เดิมของคุณคือ BILL ชื่อผู้ใช้ปัจจุบันของคุณคือ PHILLIPE"


1
ตรวจสอบคำตอบของฉันที่นี่stackoverflow.com/questions/21909163/… อาจซ้ำกัน
bresleveloper

ไม่แน่ใจว่าวิธีนี้ใช้งานได้ในเชิงบริหารอย่างไร แต่ควรรวมคำตอบจากรายการที่ซ้ำกันเข้ากับคำตอบนี้ bresleveloper เป็นทางออกที่ดี (จากรายการที่ซ้ำกัน) แต่ควรแสดงคำตอบ TGH ด้วย ประการแรกอาศัยการทำงานของกรอบซึ่งอาจเปลี่ยนแปลงได้ในอนาคตในขณะที่อย่างที่สองคือกรอบที่ไม่เชื่อเรื่องพระเจ้า
user1821052

คำตอบ:


279

ด้วย angular {{expression}} คุณสามารถเพิ่มค่า user หรือ user.id เก่าให้กับแอตทริบิวต์ ng-change เป็นสตริงตามตัวอักษร:

<select ng-change="updateValue(user, '{{user.id}}')" 
        ng-model="user.id" ng-options="user.id as user.name for user in users">
</select>

ใน ngChange อาร์กิวเมนต์ที่ 1 เพื่อ updateValue จะเป็นค่าผู้ใช้ใหม่อาร์กิวเมนต์ที่ 2 จะเป็นลิเทอรัลที่สร้างขึ้นเมื่อแท็ก select ถูกอัปเดตโดยเชิงมุมครั้งล่าสุดโดยมีค่า user.id เก่า


6
โปรดทราบว่าuserการเรียกในวิธีการเป็นวิธีที่มาจากng-modelและไม่ใช่จากตัวเลือก ng (อาจทำให้เข้าใจผิด) หวังว่าโซลูชันที่สง่างามนี้จะใช้งานได้ในเชิงมุมรุ่นต่อ ๆ ไป :)
icl7126

15
สิ่งนี้ควรถือเป็นอันตราย ฉันเพิ่งเจอข้อบกพร่องสกปรกที่เกิดขึ้นเมื่อ user.id มีอักขระพิเศษ (เช่น 'หรือ /) เนื่องจากโปรแกรมแยกวิเคราะห์นิพจน์เชิงมุมไม่ชอบนิพจน์เช่น updateValue (ผู้ใช้' blah / blah ')
Antoine Banctel-Chevrel

2
ในฟังก์ชัน updateValue $ scope.user.id มีค่าที่เลือกใหม่อยู่แล้ว - ไม่จำเป็นต้องส่งพารามิเตอร์สำหรับค่าใหม่ไป
Majix

@ LINQ2Vodka ฉันคิดว่ามันใช้ได้เฉพาะโดยไม่มีเครื่องหมายคำพูดถ้าuser.idเป็นตัวเลข ... มันจะใช้ไม่ได้ถ้าuser.idเป็นสตริงหรือ guid
Tamas

1
สวยงาม :))))
Makatun

16

นอกจากนี้คุณสามารถใช้

<select ng-change="updateValue(user, oldValue)"     
       ng-init="oldValue=0"
       ng-focus="oldValue=user.id"
       ng-model="user.id" ng-options="user.id as user.name for user in users">
</select>

1
คำตอบนี้ใช้ได้ดีกับ ng-repeat คุณยังสามารถใช้ ng-click แทนได้หากองค์ประกอบที่คุณใช้อยู่รองรับ ng-change แต่ไม่ใช่ ng-focus
meticoeus

1
ng-init = "oldValue = 0" & ng-focus = "oldValue = user.id" ทำเคล็ดลับให้ฉัน
thatzprem

14

คุณสามารถใช้บางอย่างเช่น ng-change = someMethod ({{user.id}}) การเก็บค่าของคุณไว้ด้านข้าง {{expression}} จะประเมินนิพจน์ในบรรทัดและให้ค่าปัจจุบันแก่คุณ (ค่าก่อนที่จะเรียกวิธีการ ng-change)

<select ng-model="selectedValue" ng-change="change(selectedValue, '{{selectedValue}}')">

13

เพียงเก็บตัวแปร currentValue ไว้ในคอนโทรลเลอร์ของคุณที่คุณอัปเดตทุกการเปลี่ยนแปลง จากนั้นคุณสามารถเปรียบเทียบกับค่าใหม่ได้ทุกครั้งก่อนที่จะอัปเดต '

แนวคิดในการใช้นาฬิกาก็ดีเช่นกัน แต่ฉันคิดว่าตัวแปรง่ายๆเป็นวิธีแก้ปัญหาที่ง่ายและสมเหตุสมผลที่สุด


นาฬิกาใช้งานได้ราคาแพงเล็กน้อยฉันชอบคำตอบของ db-inf .. มันเป็นวิธีการทำงานที่ง่าย
Pramod Sharma

4
คำตอบที่ดีที่สุด หากคุณอยู่ใน ng-repeat ให้สร้างตัวแปรในขอบเขตย่อยโดยใช้ ng-init
Romain F.

1
IMHO นี่เป็นทางเลือกที่ดีที่สุด เนื่องจากการดึงค่าเก่าไม่ได้ถูกจัดเตรียมโดย ngChange แบบสำเร็จรูปโซลูชันเช่นจาก @ db-inf อาจเกิดขึ้นในเวอร์ชันในอนาคต นอกจากนี้ฟังดูเหมือนความรับผิดชอบของคอนโทรลเลอร์ดูเหมือนจะแปลกที่จะมอบหมายให้กับเลเยอร์มุมมอง
Felipe Leão

9

คุณสามารถใช้นาฬิกาขอบเขต:

$scope.$watch('user', function(newValue, oldValue) {
  // access new and old value here
  console.log("Your former user.name was "+oldValue.name+", you're current user name is "+newValue.name+".");
});

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch


6
ฉันเจอบทความที่ระบุว่านาฬิกาสกปรก / ไม่มีประสิทธิภาพมากกว่าเมื่อเทียบกับ ng-change benlesh.com/2013/10/title.html
Menios

5
จากประสบการณ์ของฉันคุณแทบไม่อยากใช้นาฬิกาเลย
nardnob

2
หากการเขียนโปรแกรมเป็นศิลปะอัตนัยคุณอาจมีบางอย่างที่นั่น อนิจจา - มีสาเหตุหลายประการที่คุณอาจต้องการหลีกเลี่ยง ng-charge หรือแนวทางตามคำสั่งอื่น ๆ ซึ่งไม่เกี่ยวข้องกับการทำสิ่งต่างๆในลักษณะ "เชิงมุม"
tommybananas

2

คุณสามารถใช้นาฬิกาแทนได้เนื่องจากมีค่าเก่าและใหม่ แต่คุณจะเพิ่มเข้าไปในวงจรการสรุปข้อมูล

ฉันแค่เก็บตัวแปรที่สองไว้ในคอนโทรลเลอร์และตั้งค่านั้น


นี่เป็นตัวอย่างที่ค่อนข้างน่าสนใจฉันใช้เวลาอ่านมากกว่ากังวลเกี่ยวกับผู้เฝ้าดูคนเดียวในกรณีนี้ ยังคงเป็นเรื่องดีที่ฉันคิดว่าเบื่อหน่าย
tommybananas

1
นาฬิกาและ ng-change มีพฤติกรรมที่แตกต่างกันจริง ๆ : ng-change ตรวจจับเหตุการณ์ของผู้ใช้เท่านั้นในขณะที่$watchจะเริ่มทำงานทุกครั้งที่มีการเปลี่ยนแปลงตัวแปร ผู้เฝ้าดูเพิ่มความซับซ้อนและมีแนวโน้มที่จะสร้างรอบการอัปเดตเมื่อโค้ดเปลี่ยนค่า
Rhys van der Waerden

ฉันเห็นด้วยกับ @Rhys van der Waerden ... บทความนี้ระบุว่า $ watch เป็นอันตรายเล็กน้อย: benlesh.com/2013/10/title.html
Menios
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.