AngularJS 조건부 ng-disabled가 다시 활성화되지 않음
조건부로 비활성화된 텍스트 입력 필드 지정:ng-disabled="truthy_scope_variable"
, 각도JS는 스코프 변수가 처음 위조될 때 필드를 비활성화하지만 이후 변경 시에는 활성화하지 않습니다.그 결과 필드는 디세이블인 채로 있습니다.뭔가 잘못된 것 같은데 콘솔 로그가 비어 있습니다.
truthy scope 변수는 라디오 버튼 모델에 연결되어 있으며$watch
변경은 되지만 입력 필드의ng-disabled
가 예상대로 작동하지 않습니다.수동으로 전화를 걸었습니다.$apply
Angular가 DOM 변경을 트리거하고 있는 것 같습니다.
컨트롤러 내:
$scope.new_account = true
라디오 버튼:
<input type="radio" ng-model="new_account" name="register"
id="radio_new_account" value="true" />
<input type="radio" ng-model="new_account" name="register"
id="radio_existing_account" value="false" />
조건부로 비활성화된 입력 필드:
<input type="password" ng-disabled="new_account" id="login-password"
name="password" ng-model="password" />
처음에 설정했을 경우$scope.new_account = false
필드는 비활성화되지만 다시 활성화되지 않습니다.왜 이런 일이 생기는 건가요?
이는 HTML 속성이 항상 문자열이기 때문에 예제에서는 ngDisabled가 두 경우 모두 문자열("true" 또는 "false")을 평가하고 있기 때문입니다.
수정하려면 모델을 ngDisabled 문자열 값과 비교해야 합니다.
ng-disabled="new_account == 'false'"
... 또는 확인란을 사용하여 실제 부울 값을 가져옵니다.
<input type="checkbox" ng-model="existing_account" name="register" id="checkbox_new_account" />
<label for="checkbox_new_account">Is Existing Account</label>
Password:
<input type="password" ng-disabled="existing_account" name="password" ng-model="password" />
여기 두 가지 솔루션이 모두 포함된 PLNKR이 있습니다.
사용 가능한 대체 솔루션이 있습니다.
ng값
<input type="radio" ng-model="new_account" name="register"
id="radio_new_account" ng-value="true" />
<input type="radio" ng-model="new_account" name="register"
id="radio_existing_account" ng-value="false" />
<input type="password" ng-disabled="new_account" id="login-password"
name="password" ng-model="password" />
2016년 3월 현재 바인딩된 값은 ng-disabled가 Safari가 아닌 경우에도 Chrome 및 Firefox에서 ui를 업데이트합니다.Safari에서 ng-disabled를 사용하면 입력 요소가 업데이트되지 않습니다.value
속성의 값이 갱신됩니다(체크).element.value
변경 후)
Safari에서 UI 업데이트를 강제하기 위해ng-model
또는ng-value
ng-disabled 대신 ng-readonly를 사용해야 합니다.
언급URL : https://stackoverflow.com/questions/17855304/angularjs-conditional-ng-disabled-does-not-re-enable
'programing' 카테고리의 다른 글
mongoose vs mongodb(nodejs 모듈/확장) 중 어느 쪽이 나을까요?그리고 왜? (0) | 2023.03.21 |
---|---|
WP 'body' 클래스에 Woocommerce 상위 범주 추가 (0) | 2023.03.21 |
로컬 데이터베이스의 스트라이프 미러링(구독, 청구서, 쿠폰 등)은 효율적입니까? (0) | 2023.03.21 |
초기 vue.js/vue-router 로드 시 모든 서버 측 데이터를 로드하는 방법 (0) | 2023.03.21 |
스프링 부트 복수 데이터 소스 (0) | 2023.03.21 |