Comment économiser de l'entrée de texte à une variable lors de la saisie dans angularjs

Quelqu'un peut me dire comment je peux faire s'il vous plaît?

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="form.one" ng-submit="submitForm()">
      <input ng-model="name">
      <input type="submit">
    </form>
    <p>Hello {{name}}!</p>


  </body>

Et mon app.js est 

  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
var data = {};
$scope.submitForm = function() {

 var data = form.one.name;
};

});

Comment puis-je enregistrer l'entrée de la variable de données? Est-il possible d'enregistrer sur pression de touche?

  • L'entrée est de $champ d'application.nom. Pourquoi voudriez-vous dans une autre variable?
  • ng-modèle fournit une liaison bidirectionnelle. Juste regardez pour ngModel. Vérifiez également ce document listing de tous les arguments d'entrée pour une meilleure compréhension.
  • Je veux passer cette entrée résultat comme un $url http, donc, ce pourquoi je pensais à utiliser une autre variable, je viens juste de commencer avec angularjs et de la programmation.
InformationsquelleAutor nikos83 | 2015-05-19
  1. 3

    Pour l'utilisation de votre forme Angulaire, il y a quelques modifications que vous devez faire pour que ce code fonctionne: d'abord, vous devez ajouter le novalidate attribut à votre formulaire; il est utilisé pour désactiver le navigateur natif de la validation du formulaire. Angulaire va utiliser sa propre validation. Voici quelques autres modifications (ils sont expliquées en détail ici):

    <body ng-controller="MainCtrl">
  <form novalidate>
    <input ng-model="name">
    <!-- The method for submitting the data goes on the button. -->
    <!-- The name is passed to the method you want to use to store the data, which you make happen when the button is clicked by using the ngClick directive. -->
    <input type="submit" ng-click="submitForm(name)" value="Click me!">
  </form>
  <p>Hello {{name}}!</p>
  <!-- This bit of code is to display the results of adding names to the array in the browser window: -->
  <pre>{{ data }}</pre>
</body>

    Voici le Javascript:

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = "Name";

  //I put the data array in the $scope so it can be displayed in the browser window and you can see the results:
  $scope.data = [];

  //Now, whenever the button is clicked, this method is run.
  //It then stores the name in the 'data' array defined above.
  $scope.submitForm = function(name) {
    $scope.data.push(name);
  };
});
    • Merci beaucoup, il est possible de le faire sans en cliquant sur le bouton? Sur le typage comme ceci {{nom}} montre détroit après avoir tapé?
    • Voulez-vous dire l'ajout de la matrice de droite après la saisie ou l'affichage dans le navigateur tout de suite après la dactylographie? Pour l'affichage du nom que l'utilisateur tape, tout ce que vous avez à faire est de faire votre votre formulaire d'entrée et l'élément paragraphe se référer à la même variable dans la portée, comme $scope.name.
    • oui, dans l'origine, l'idée était de prendre les données d'entrée et les ajouter à la fin de $url http, donc je peux obtenir des réponses json à partir du serveur live sur le typage, ce pourquoi je veux utiliser des variables pour stocker ces données. $http.get('server.com/$champ d'application.nom').succès(function (response) {$scope.nom2 = réponse;});
    • Ah, je vois. La réponse à cette question est différente et un peu plus complexe. Il serait peut-être plus utile de créer une nouvelle question pour le comportement spécifique que vous essayez d'atteindre?
    • Ok il y a la question stackoverflow.com/questions/30333578/... Merci Ricardo pour votre aide
    InformationsquelleAutor Ricardo Lima
  2. 0

    Essayez ceci pour lui montrer tout de suite après tapant:

    <body ng-controller="myApp">
    <input type="text" ng-model="name">
    <p>Hello {{name}}!</p>
</body>

    Javascript:

    var myApp = angular.module('myApp',[]);

myApp.controller('myApp', function ($scope) {
    $scope.name = $scope.name;
    console.log($scope.name)
});

    Petit peu JSFiddle pour cela:
    https://jsfiddle.net/joshdmiller/HB7LU/

    InformationsquelleAutor Mike T