thay đổi nhận giá trị mới và giá trị ban đầu


118

Tôi đang sử dụng các tùy chọn ng để chọn các giá trị từ một kéo xuống. Tôi muốn có thể so sánh giá trị cũ với giá trị mới. ng-thay đổi hoạt động tốt để lấy giá trị mới của kéo xuống, nhưng làm cách nào tôi có thể nhận được cả giá trị mới và giá trị ban đầu?

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

Chẳng hạn, giả sử tôi muốn bộ điều khiển đăng nhập, "Tên người dùng cũ của bạn là BILL, tên người dùng hiện tại của bạn là PHILLIPE."


1
kiểm tra câu trả lời của tôi ở đây stackoverflow.com/questions/21909163/ Có thể bị trùng lặp
bresleveloper

không chắc chắn làm thế nào điều này hoạt động hành chính nhưng bằng cách nào đó các câu trả lời từ trùng lặp nên được hợp nhất với câu hỏi này. bresleveloper là một giải pháp tốt đẹp (từ bản sao) nhưng câu trả lời của TGH cũng nên được hiển thị. Cái đầu tiên dựa vào hoạt động của khung, có thể thay đổi trong tương lai, trong khi cái thứ hai là thuyết bất khả tri.
dùng1821052

Câu trả lời:


279

Với một {{biểu thức}} góc, bạn có thể thêm giá trị user hoặc user.id cũ vào thuộc tính ng-change dưới dạng một chuỗi ký tự:

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

Trên ngChange, đối số thứ nhất để updateValue sẽ là giá trị người dùng mới, đối số thứ 2 sẽ là nghĩa đen được hình thành khi thẻ chọn được cập nhật lần cuối bởi góc, với giá trị user.id cũ.


6
Lưu ý rằng usercuộc gọi trong phương thức là cuộc gọi từ ng-modelvà không phải từ tùy chọn ng (có thể gây hiểu nhầm). Hy vọng giải pháp tao nhã này cũng sẽ hoạt động trong các phiên bản góc cạnh trong tương lai :)
icl7126

15
Điều này nên được coi là có hại. Tôi vừa gặp một lỗi bẩn xảy ra khi user.id chứa một ký tự đặc biệt (như 'hoặc /). Điều này là do trình phân tích cú pháp biểu thức Angular không thích biểu thức như updateValue (người dùng,' blah / blah ').
Antoine Banctel-Chevrel

2
Trong hàm updateValue, $ scope.user.id đã chứa giá trị mới được chọn - không cần truyền tham số cho giá trị mới cho nó
Majix

@ LINQ2Vodka, tôi nghĩ rằng nó chỉ hoạt động mà không có dấu ngoặc kép nếu user.idlà số ... nó sẽ không hoạt động nếu user.idlà một chuỗi hoặc một hướng dẫn
Tamas

1
đẹp :))))
Makatun

16

Ngoài ra bạn có thể sử dụng

<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
Câu trả lời này hoạt động thực sự tốt của ng-repeat. Thay vào đó, bạn cũng có thể sử dụng ng-click nếu phần tử bạn đang sử dụng này hỗ trợ thay đổi ng nhưng không tập trung vào ng.
meticoeus

1
ng-init = "oldValue = 0" & ng-Focus = "oldValue = user.id" đã lừa tôi.
thatzprem

14

Bạn có thể sử dụng một cái gì đó như ng-change = someMethod ({{user.id}}). Bằng cách giữ giá trị của bạn ở bên {{biểu thức}}, nó sẽ đánh giá biểu thức trong dòng và cung cấp cho bạn giá trị hiện tại (giá trị trước khi phương thức thay đổi ng được gọi).

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

13

Chỉ cần giữ một biến currentValue trong bộ điều khiển của bạn mà bạn cập nhật mỗi khi thay đổi. Sau đó, bạn có thể so sánh giá trị đó với giá trị mới mỗi lần trước khi cập nhật. '

Ý tưởng sử dụng đồng hồ cũng tốt, nhưng tôi nghĩ một biến đơn giản là giải pháp đơn giản và hợp lý nhất.


Đồng hồ hoạt động ít tốn kém, tôi thích câu trả lời của db-inf .. đó là giải pháp làm việc đơn giản
Pramod Sharma

4
Câu trả lời tốt nhất. Nếu bạn đang ở trong một lặp lại ng, hãy tạo một biến trong phạm vi phụ bằng cách sử dụng ng-init.
Romain F.

1
IMHO đây là sự thay thế tốt nhất. Vì việc truy xuất các giá trị cũ không được cung cấp bởi ngChange ngoài luồng, các giải pháp như giải pháp từ @ db-inf có thể sẽ nổ tung trên các phiên bản trong tương lai. Bên cạnh đó, điều này nghe có vẻ như khả năng đáp ứng của bộ điều khiển, có vẻ kỳ lạ khi ủy thác nó cho lớp xem.
Felipe Leão

9

Bạn có thể sử dụng đồng hồ phạm vi:

$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
Tôi đã bắt gặp một bài báo nói rằng đồng hồ bẩn hơn / kém hiệu quả hơn so với thay đổi ng. ben Meat.com/2013/10/title.html
Menios

5
Theo kinh nghiệm của tôi, bạn gần như không bao giờ muốn sử dụng đồng hồ
nardnob

2
Nếu lập trình là một nghệ thuật chủ quan, bạn có thể có một cái gì đó ở đó. Than ôi - có nhiều lý do tại sao bạn có thể muốn tránh ng-Charge hoặc các cách tiếp cận dựa trên chỉ thị khác, không liên quan đến việc thực hiện mọi thứ theo cách "góc cạnh".
tommybananas

2

Bạn có thể sử dụng đồng hồ thay thế, bởi vì nó có giá trị cũ và mới, nhưng sau đó bạn đang thêm vào chu trình tiêu hóa.

Tôi chỉ cần giữ một biến thứ hai trong bộ điều khiển và đặt nó.


Đây là một ví dụ khá nhỏ, tôi rất dễ đọc về việc lo lắng về một người theo dõi duy nhất trong trường hợp này. Tôi vẫn còn là một điều tốt để mệt mỏi.
tommybananas

1
Watch và ng-change thực sự có những hành vi khác nhau: ng-change chỉ phát hiện các sự kiện của người dùng, trong khi đó $watchsẽ kích hoạt mỗi khi biến thay đổi. Người theo dõi tăng độ phức tạp và có xu hướng tạo chu kỳ cập nhật khi mã thay đổi giá trị của họ.
Rhys van der Waerden

Tôi đồng ý với @Rhys van der Waerden ... bài viết này nói rằng $ watch hơi nguy hiểm: ben Meat.com/2013/10/title.html
Menios
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.