Clearing the form fields and saving the details in angular JS

I have created a simple form using angular js. When the user enter their details and submit it the values will be saved in console, but the values remains in the field even after clicking the submit button. I want to save details of various fields in console for now and need to clear the fields once the submit button is clicked so that the next person details can be entered. all the user details will be saved in console for now so that we can retrive it later

View code:

<html lang="en" ng-app="person_info">
<head>
<meta charset="utf-8">
<title>Person info</title>
<script src="../angular.min.js"></script>
<script src="controller_class2.js"></script>
</head>
<body ng-controller="info">
<div class="forms">
  Name: <input type="text" value="name" ng-model="person.name"> </br></br>
  First Name : <input type="text" value="fname" ng-model="person.firstname"></br></br>
  Phone Number : <input type="text"  value="number" ng-model="person.number"></br></br>
  Email : <input type="email" value="email" ng-model="person.email"></br></br>
  Address : <input type="text" value="address" ng-model="person.address"></br></br>
  <input type="submit" value="submit" name="submit" ng-click="test()">
</div>

  <p>Name : {{person.name}}</p>
<p>{{person.firstname}}</p>
  <p>{{person.number}}</p>
    <p>{{person.email}}</p>
      <p>{{person.address}}</p>

  {{ person | json }}

Controller code :

var person_info = angular.module('person_info', []);
person_info.controller('info', function($scope) {
$scope.test = function () {
console.log($scope.person);
}
});

Answers:

Answer

Here is PLUNKER of your code...

you should use ng-click instead onClick...

Answer

You could set a property on the model to the saved person and reference this object underneath the form:

Controller:

$scope.test = function(){

    // do whatever needs to be done to save the person

    $scope.savedPerson = $scope.person;
}

View:

<p>Saved person {{savedPerson.name}}</p>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.