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> 

예를 들어, 컨트롤러가 "이전 user.name은 BILL이고 현재 사용자 이름은 PHILLIPE입니다."라고 기록하기를 원한다고 가정 해 보겠습니다.


1
여기 내 대답을 확인하십시오. stackoverflow.com/questions/21909163/… 중복 될 수 있습니다
bresleveloper

이것이 행정적으로 어떻게 작동하는지 확실하지 않지만 어떻게 든 중복의 답변이 이것과 병합되어야합니다. bresleveloper는 (중복에서) 좋은 솔루션이지만 TGH 답변도 표시되어야합니다. 첫 번째는 향후 변경 될 수있는 프레임 워크의 작동에 의존하고 두 번째는 프레임 워크에 구애받지 않습니다.
user1821052

답변:


279

각도 {{expression}}을 사용하여 이전 사용자 또는 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에서 updateValue에 대한 첫 번째 인수는 새 사용자 값이되고, 두 번째 인수는 이전 user.id 값을 사용하여 angular에 의해 마지막으로 선택 태그가 업데이트되었을 때 형성된 리터럴이됩니다.


6
점을 유의 user메소드 호출이의 하나입니다 ng-model, 그리고 겨 - 옵션에서 (오해의 소지가 될 수 있습니다). 희망이 우아한 해결책은 각 :)의 향후 버전에서도 작동합니다
icl7126

15
이것은 유해한 것으로 간주되어야합니다. user.id에 특수 문자 (예 : '또는 /)가 포함되어있을 때 발생하는 더러운 버그를 발견했습니다. Angular 식 파서가 updateValue (user,'blah / blah ')와 같은 식을 좋아하지 않기 때문입니다.
Antoine Banctel-Chevrel

2
updateValue 함수에서 $ scope.user.id에는 이미 새로 선택한 값이 포함되어 있습니다. 새 값에 대한 매개 변수를 전달할 필요가 없습니다
Majix

@ LINQ2Vodka, 나는 그것이 user.id숫자 인 경우에만 따옴표없이 작동한다고 생각합니다 ... user.id문자열이나 GUID 이면 작동하지 않습니다
Tamas

1
beautiful :))))
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-change를 지원하지만 ng-focus는 지원하지 않는 경우 대신 ng-click을 사용할 수도 있습니다.
meticoeus

1
ng-init = "oldValue = 0"& ng-focus = "oldValue = user.id"가 나를 위해 트릭을했습니다.
thatzprem 2006

14

ng-change = someMethod ({{user.id}})와 같은 것을 사용할 수 있습니다. 측면 {{expression}}에 값을 유지하면 식을 인라인으로 평가하고 현재 값 (ng-change 메서드가 호출되기 전의 값)을 제공합니다.

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

13

변경 될 때마다 업데이트하는 currentValue 변수를 컨트롤러에 유지하기 만하면됩니다. 그런 다음 업데이트하기 전에 매번 새 값과 비교할 수 있습니다. '

시계를 사용한다는 생각도 좋지만 간단한 변수가 가장 간단하고 논리적 인 해결책이라고 생각합니다.


시계가 조금 비싼 작업입니다, 내가 DB-INF의 대답을 좋아 .. 그것은 간단한 작업 솔루션입니다
프라 모드 샤르마

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 2014-10-29

1
Watch와 ng-change는 실제로 다른 동작을 가지고 있습니다. ng-change는 사용자 이벤트 만 감지 $watch하고 변수가 변경 될 때마다 실행됩니다. 감시자는 복잡성을 증가시키고 코드가 값을 변경할 때 업데이트주기를 생성하는 경향이 있습니다.
Rhys van der Waerden

: 나는 ... Waerden 데르 @Rhys 밴 $ 시계가 약간 위험한 것을이 문서의 상태에 동의 benlesh.com/2013/10/title.html
Menios
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.