web-dev-qa-db-fra.com

AngularJS conditionnel ng-disabled ne pas réactiver

Étant donné un champ de saisie de texte désactivé de manière conditionnelle à l'aide de ng-disabled="truthy_scope_variable", AngularJS désactive le champ la première fois la variable d’étendue est falsifiée, mais ne l’active pas pour les modifications ultérieures. En conséquence, le champ reste désactivé. Je ne peux que supposer que quelque chose s'est mal passé, mais le journal de la console est vide.

La variable de vérité est liée à un modèle de bouton radio et je peux même $watch _ cela change, mais ng-disabled ne fonctionne pas comme prévu. J'ai manuellement essayé d'appeler $apply, mais il semble que Angular déclenche des modifications du DOM).

Dans le contrôleur:

$scope.new_account = true

Boutons radio:

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

Champ de saisie désactivé de manière conditionnelle:

<input type="password" ng-disabled="new_account" id="login-password"
 name="password" ng-model="password" />

Si je règle initialement $scope.new_account = false, le champ est rendu désactivé, mais jamais réactivé. Pourquoi cela arrive-t-il?

javascriptangularjsangularjs-scope
37
Petrus Theron

Il existe une solution alternative, il suffit d'utiliser

ng-value

 <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" />
15
Ajay Beniwal

En effet, les attributs HTML sont toujours des chaînes. Dans votre exemple, ngDisabled évalue une chaîne dans les deux cas ("true" ou "false").

Pour remédier à ce problème, comparez le modèle à la valeur de chaîne dans ngDisabled:

ng-disabled="new_account == 'false'"

... ou utilisez une case à cocher pour obtenir la valeur booléenne réelle:

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

Voici un PLNKR avec les deux solutions.

32
Stewie

À partir de mars 2016, les valeurs liées mettront l'interface utilisateur à jour dans Chrome et Firefox, même si ng-disabled est vrai, mais pas dans Safari. Dans Safari, lorsque vous utilisez ng-disabled, l'interface utilisateur ne sera pas mise à jour, bien que l'élément d'entrée value propriété aura la valeur mise à jour (Check element.value après l'avoir changé.)

Dans Safari pour forcer les mises à jour de l'interface utilisateur avec ng-model ou ng-value directives que vous devez utiliser ng-readonly au lieu de ng-disabled.

1
NoNameProvided