2014-12-09 3 views
4

이 점에 유의하십시오. 이는 stackoverflow에서 관련 질문의 99 %와 반대입니다.Angularjs가 뷰를 업데이트하지만 모델은 업데이트하지 않습니다.

Mi 문제는 다음과 같습니다. 'Master'선택이 변경되면 'Slave'보기가 업데이트되지만 모델이 아니라 종속 선택이 있습니다. 기묘한.

예제 코드 :

<!DOCTYPE html> 
<html ng-app> 

<head> 
    <script src="https://code.angularjs.org/1.3.5/angular.js"></script> 
</head> 

<body> 
    <select ng-model='master'> 
    <option value='m1'>Master 1</option> 
    <option value='m2'>Master 2</option> 
    </select> 
    <select ng-model='slave'> 
    <option value='Slave 1 selected' ng-selected='master == "m1"'>Slave 1</option> 
    <option value='Slave 2 selected' ng-selected='master == "m2"'>Slave 2</option> 
    </select> 
    {{ slave }} 
</body> 

</html> 

주인이 선택 변경, 당신은 선택 변화가 아니라위한 인쇄 된 값을 볼 수있는 바인딩 {{노예}}. plunker에

링크 : http://plnkr.co/edit/LjaKgTTfBlczkGuCIhZ1

+2

내 생각 엔이게 NG 때문에 발생합니다 마스터가 변경 될 때 슬레이브 값의 1 시간 설정을 할 경우 값이 변경 될 때

, 당신은 코드를 실행하기 위해 시계를 만들어야합니다 -selected는 모델을 전혀 인식하지 않고 단순히 선택된 속성을 설정하고 값을 변경하지 않으므로 모델이 업데이트되지 않습니다. – Rytmis

+0

ng-options을 사용하지 않는 이유는 무엇입니까? ng-selected가 ng-model을 업데이트하지 않습니다. – PSL

+0

이 같은 것을 찾으십니까? http://stackoverflow.com/questions/25413071/how-to-handle-cascading-chained-dropdowns-using-multiple-ng-options – PSL

답변

1

각도 업데이트 뷰와 사용자의 상호 작용을 기반으로 모델 변경하고 모델을 기준으로보기를. ng-selected을 사용하여 선택한 옵션을 수동으로 변경하면 각도가 사용자가 새 옵션을 선택하지 못했기 때문에 slave을 업데이트하지 않습니다. slave은 마지막으로 컨트롤에서 선택한 옵션을 설정 한 이후로 변경되지 않았기 때문에 선택한 옵션을 업데이트하지 않습니다. 나는 ng-modelng-selected을 함께 사용해야한다고 생각하지 않습니다. 나는 이것이 총체적인 의미를 가지며 각도의 버그가 아니라고 생각한다. 단지 선택된 것을 의미하지는 않는다.이 코드에 대한 생각 :

$scope.buttonClicked = function() { 
    $scope.slave = "Slave 1 selected"; 
    $scope.master = "m2"; 
}; 

slave의 값이되어야하며, 어떤 옵션을 선택해야합니까? 코드에서 두 옵션을 모두 설정했는데 html 선택에 어떤 각도를 사용해야합니까? '노예'가치에 대한 귀하의 설정을 무시해야합니까? 만약 masterm2이라면 슬레이브 2를 선택해야한다고 말하는 ng-selected 속성을 무시해야합니까? masterm1으로 설정하면 ng-selected이 선택한 옵션을 슬레이브 1로 만듭니다. 그러면 사용자가 옵션을 슬레이브 2로 변경하면 어떻게됩니까? ng-selected 옵션이 올바르지 않습니다.

$scope.$watch('master', function(newValue, oldValue) { 
    if (newValue == 'm1') { 
    $scope.slave = 'Slave 1 selected'; 
    } else if (newValue == 'm2') { 
    $scope.slave = 'Slave 2 selected'; 
    } else { 
    $scope.slave = undefined; 
    } 
}); 
+0

올바른 대답 만 가지고 있기 때문에 받아 들일 것입니다. 그러나 @ new-dev 또한 맞습니다. 이것을 구현하는 올바른 방법은 실제로 $ watcher '를 통해 이루어집니다. – Daniel

+0

그리고 작동 코드 예제가 있습니다. +1 – Daniel

0

이에 대한 각 접근 방법은 (그것은 다른 사실, 아무것도로 평가되면 ng-selected 기본적으로 단지 selected 속성을 설정)하지 그냥 DOM이 직접 슬레이브 모델을 변경하는 것입니다. 기술적으로, 모델을 업데이트하는 감시자를 추가하여이를 해킹 할 수 있지만 훨씬 더 좋은 아이디어처럼 들릴 수 있습니다. 여기

는 조금 실수의, 예,하지만 실제로 일부 JS를 작성하지 않고도 할 수있는 가장 빠른 일이라고 REPLACE (하지만 당신은 아이디어를 얻을) :

<select ng-model='master' ng-change="slave = master.replace('m', 's')"> 
    <option value='m1'>Master 1</option> 
    <option value='m2'>Master 2</option> 
    </select> 
    <select ng-model='slave'> 
    <option value='s1' >Slave 1</option> 
    <option value='s2' >Slave 2</option> 
    </select> 

http://plnkr.co/edit/WT7vb7yvtcvaUPUwGXdI?p=preview

+1

원래 질문은 m과 s를 대체하는 것만 큼 단순하지 않다는 것을 확신합니다 : D – PSL

+0

나는 그렇지만 정확히 OP가 무엇을하려고하는지 알지 못합니다 (왜 두 모델?), 교체는 매퍼 객체 생성을 피하는 나의 방법이었습니다. :) – Shomz

+0

그냥 ng-options를 사용하십시오 ... 그게 목적입니다 .. – PSL

1

Shomz의 대답 @replace은 해킹과 비슷하지만 한 가지 방법입니다.

slave이 업데이트되지 않는 이유는 Angular가 개발자의 지식없이 ViewModel을 변경하는 데주의해야하기 때문입니다. 일반적으로 ViewModel은 외부 이벤트에 대한 응답으로 컨트롤러에 의해 또는 사용자 동작에 대한 응답으로 변경되어야합니다. 이 경우 슬레이브에서 변경된 selected 속성에 대한 응답으로 변경되었으므로 Angular는 slave을 변경하지 않습니다.

그것에 대해 생각하는 또 다른 방법은입니다 : 당신이보기를 가지고 있지 않은 경우 slave 같은 컨트롤러를 단위 테스팅의 경우와 같이, (즉 <select>) master의 변화에 ​​대한 응답으로 업데이트 될 것입니다 방법.

이것을 구현하는 적절한 방법은 사실 $watcher입니다. 따라서이 시점에서 @Shomz에 동의하지 않습니다.

마스터와 슬레이브가 서로 음영 처리해야하는 이유를 평가해볼 것을 제안합니다. 이 경우, 당신은 그 같은 ng-model을 사용해야합니다

<select ng-model="master2" 
     ng-options="val.k as val.v for val in [{k: 'm1', v: 'Master1'}, {k: 'm2', v: 'Master2'}]"> 
</select> 
<select ng-model="master2" 
     ng-options="val.k as val.v for val in [{k: 'm1', v: 'Slave 1'}, {k: 'm2', v: 'Slave 2'}]"> 
</select> 
+0

예. 나는 그저 ng 옵션을 사용하기 만했다. – PSL

+0

watcher 부분에서, 나는 특정한'scope. $ watch ('master'... 'thing)를 쓰는 것을 의미했다. 그것은 정말로 나쁠 것이다. 그리고 나는 대체가 순수한 게으름이라고 말했다. DOM에 관심이 있습니다. – Shomz

+0

@Shomz, 이유가 무엇입니까? 'slave '가'master'의 조건부 음영 처리를한다면, 나는 이것이 _ 방법이라고 말하고 싶습니다. 항상 같으면 ViewModel 속성이 같아야합니다. –