CODEWITHSUNDEEP
angularjs
nikos83
nikos83

Reputation: 423

How to save input text to variable while typing in angularjs

Can anyone tell me how can I do that please?

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

And my app.js is 

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

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

 var data = form.one.name;
};

});

How can I save input to the data variable? Is it possible to save on keypress?

Upvotes: 1

Views: 14196

Answers (2)

Mike T
Mike T

Reputation: 11

Try this for it to show straight after typing:

<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)
});

Small little JSFiddle for this: https://jsfiddle.net/joshdmiller/HB7LU/

Upvotes: 0

Ricardo Lima
Ricardo Lima

Reputation: 285

To use your form with Angular, there's a few modifications you need to make for this code to work: first, you need to add the novalidate attribute to your form; it is used to disable the browser's native form validation. Angular will use it's own validation. Here's a few other modifications (they're explained in detail here):

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

Here's the 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);
  };
});

Upvotes: 4

Related Questions