javascript - Saving values in to array and displaying it based on the number -
i have following code written in angular js
<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> <style type="text/css"> .forms{width:200px;height:300px;padding:75px;float:left;background:#ccc;} .deatils{width:200px;height:auto;padding:100px;float:left;background:#ccc;margin- left:10px;} .fields {background:#999999;float: left;height:120px;padding: 20px;width:260px;} </style> </head> <body ng-controller="info"> <div class="forms"> name:</br> <input type="text" value="name" ng-model="person.name"> </br> </br> first name :</br> <input type="text" value="fname" ng-model="person.firstname"> </br> </br> phone number :</br> <input type="number" value="number" ng-model="person.number"> </br> </br> email :</br> <input type="email" value="email" ng-model="person.email"> </br> </br> address :</br> <input type="text" value="address" ng-model="person.address"> </br> </br> <input type="submit" value="submit" name="submit" ng-click="test()"> </div> <div class="deatils"> <p>name : {{person.name}}</p> <p>first name : {{person.firstname}}</p> <p>phone number: {{person.number}}</p> <p>email : {{person.email}}</p> <p>address :{{person.address}}</p></br></br> <p>details in json format : </br>{{ person | json }} </div> <div class="fields"> submit persons serial number display details </br> </br> <input type="number" > </br> </br> <input type="submit" value="submit number"> </div> </body> </html> controller code
var person_info = angular.module('person_info', []); person_info.controller('info', function($scope) { $scope.test = function () { console.log($scope.person); } }); when user fills form , click on submit button want details saved array , clear field next users details can filled. each user details stored in array.
i have created text field user can enter serial number of user detail have displayed. example when enter value 3 , submit this. 3rd person's details in array have displayed.
you can define function test() function in controller save current model array , clear it, here example function,
$scope.saveperson = function () { $scope.personlist.push($scope.person); //clear person model/form $scope.person = {}; }; and here html form,
<div class="forms"> name: <input type="text" value="name" ng-model="person.name"> first name : <input type="text" value="fname" ng-model="person.firstname"> phone number : <input type="number" value="number" ng-model="person.number"> email : <input type="email" value="email" ng-model="person.email"> address : <input type="text" value="address" ng-model="person.address"> <input type="submit" ng-click="saveperson()"> </div> and define function retrieve data personlist[] array this,
$scope.getperson = function (index) { //selected person details $scope.persondetail = $scope.personlist[index]; }; of course shoudl make few changes in html well, here full plunker of solution...
Comments
Post a Comment