Угловой JS условный ng-disabled не включает

Учитывая условно отключенное текстовое поле ввода с помощью ng-disabled="truthy_scope_variable", AngularJS отключает это поле при первой смене переменной области видимости, но не включает ее при последующих изменениях. В результате поле остается отключенным. Я могу только предположить, что что-то пошло не так, но журнал консоли пуст.

Переменная reality scope привязана к модели переключателя, и я даже могу ее изменить, но поле ввода 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, поле будет отключено, но никогда не будет включено. Почему это происходит?

Ответы

Ответ 1

Существует альтернативное решение, просто использующее

нг-значение

 <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" />

Ответ 2

Это потому, что атрибуты 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 с обоими решениями.

Ответ 3

С 2016 года привязанные значения будут обновлять ui в Chrome и Firefox, даже если ng-disabled имеет значение true, но не в Safari. В Safari, когда вы используете ng-disabled, обновление ui не будет обновлено, хотя свойство input value будет иметь обновленное значение (после изменения его можно проверить element.value).

В Safari для принудительного обновления ui с помощью директив ng-model или ng-value вы должны использовать ng-readonly вместо ng-disabled.