programing

AngularJS 조건부 ng-disabled가 다시 활성화되지 않음

telecom 2023. 3. 21. 21:29
반응형

AngularJS 조건부 ng-disabled가 다시 활성화되지 않음

조건부로 비활성화된 텍스트 입력 필드 지정:ng-disabled="truthy_scope_variable", 각도JS는 스코프 변수가 처음 위조될 때 필드를 비활성화하지만 이후 변경 시에는 활성화하지 않습니다.그 결과 필드는 디세이블인 채로 있습니다.뭔가 잘못된 것 같은데 콘솔 로그가 비어 있습니다.

truthy scope 변수는 라디오 버튼 모델에 연결되어 있으며$watch변경은 되지만 입력 필드의ng-disabled가 예상대로 작동하지 않습니다.수동으로 전화를 걸었습니다.$applyAngular가 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-valueng-disabled 대신 ng-readonly를 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/17855304/angularjs-conditional-ng-disabled-does-not-re-enable

반응형