Comment laisser ng-model pas mise à jour immédiatement?

Code:

<input type="text" ng-modal="name" />
{{name}}

Quand je entrer quelque chose dans le input, la suite {{name}} va changer immédiatement. Est-il en mesure de configurer uniquement mettre à jour le name après que j'ai entré tous les caractères et de laisser l'entrée?

InformationsquelleAutor Freewind | 2013-02-06
  1. 21

    Mise à jour

    Comme beaucoup l'ont mentionné Angulaire a maintenant une prise en charge intégrée pour cela à l'aide de la ng-model-options directive. Voir plus d' ici.

    <input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

    Vieille réponse ci-dessous:

    Il n'y a aucune option intégrée pour le gn-modèle de changement de comportement, mais vous pouvez écrire une coutume directive de le faire. @Gloopy a écrit une directive comme ça pour une autre question. Vous pouvez regarder le violon ici.

    La directive annule l'inscription de la input et keydown événements qui déclenchent la mise à jour après chaque frappe.

    <input type="text" ng-model="name" ng-model-onblur />

    Mise à jour:

    Mis à jour le violon d'utiliser la dernière version stable AngularJS (1.2.16 comme de l'écriture), au lieu de directement de référencement, le maître de la version sur github.

    Également ajouté une priorité explicite de sorte que la directive est exécuté après ng-model pour assurer des écouteurs d'événement sont modifiées correctement.

    • Le violon ne fonctionne pas comme prévu. Il met à jour à mesure que vous tapez
    • Remarque: Angulaire a un support intégré pour maintenant. docs.angularjs.org/api/ng/directive/ngModelOptions
    • Si il y a un moyen de changer la accepté de répondre à @manikanta ça va être génial.
    InformationsquelleAutor Martin
  2. 53

    C'est au sujet des récents ajouts à AngularJS, pour servir en tant que futur réponse.

    Angulaire des versions plus récentes (actuellement en bêta 1.3), AngularJS prend en charge cette option, à l'aide de ngModelOptions, comme 

    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

    NgModelOptions docs

    Exemple:

    <input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />
    • Il ne fonctionne pas correcte dans 1.3 beta 5, mais fixe dans l'actuel maître de construire 2602
    • tout en utilisant les options de la version 1.2? coz, le violon, les gens postent sur la substitution élément d'entrée ne fonctionne plus.
    • fonctionne correctement avec la version bêta actuelle ( 1.3.0-bêta-13 )
    • Remarque: La valeur "par défaut" et "flou" sont 2 options séparées. Les spécifiant les deux laisse "par défaut", pas "brouiller" (v1.3)
    • C'est parce que j'aime angulaire 😀
    • à l'aide de v1.4.2 . Il ne semble pas fonctionner pour moi

    InformationsquelleAutor manikanta
  3. 9

    Une meilleure option est d'utiliser le ng-modèle-options:

    <input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />
    • ceci, cependant, être la "bonne" façon ne fonctionne que dans les versions plus récentes de anguleuses qui ne supportent plus ie8... du genre un tueur dans beaucoup de dev env :/
    • Il vous suffit de tuer IE8. Google a chuté de soutien en 2012.
    • J'ai le même problème avec deux champs utilisateur et mot de passe) dans un formulaire, je veux mettre à jour lors d'un clic sur le bouton de connexion pas sur le flou ou la saisie de caractères, mon problème est que chaque fois que ng-mise à jour du modèle de l'iphone pour faire défiler la page vers le haut
    • Si le monde continue à soutenir IEs du passé, le monde pourrait se retrouver à l'aide de W95
    InformationsquelleAutor Niels Steenbeek
  4. 5

    De travail directive de code(ng-1.2RC3):
    utilisation:
    ng-model-onblur

    .directive('ngModelOnblur', function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      priority: 1,
      link: function (scope, element, attrs, ngModelCtrl) {
          if (attrs.type === 'radio' || attrs.type === 'checkbox') { return; }
          var update = function () {
              scope.$apply(function () {
                  ngModelCtrl.$setViewValue(element.val().trim());
                  ngModelCtrl.$render();
              });
          };
          element.off('input').off('keydown').off('change').on('focus', function () {
              scope.$apply(function () {
                  ngModelCtrl.$setPristine();
              });
          }).on('blur', update).on('keydown', function (e) {
              if (e.keyCode === 13) {
                  update();
              }
          });
      }
  };
})
    InformationsquelleAutor mayankcpdixit