CODEWITHSUNDEEP
angularjshtml
Nitin Agarwal
Nitin Agarwal

Reputation: 941

Storing the data in array using ng-model

I want to store the data in an array using the ng-model. I have an controller as RegisterController in which i inject $scope with ng-model name as user i.e. $scope.user={}.Here i am reading the data from form input element and submitting the data that has ng-model="user.name" and now i want to store that name or the multiple values in that user object. 

<form class="well" align="center">
  <input ng-model="user.name" name="name"  type="text"><br/>
  <input ng-model="user.name" name="mobile"  type="text"><br/>
  <input ng-model="user.name" name="mail"  type="mail"><br/>
  <input ng-model="user.name" type="password" name="otp"><br/><br/>

  <button type="button">Sign Up</button>
  <a href="#/login">Login</a><br><br>
</form>

and the controller is 

app.controller("RegisterController",function($scope){

  $scope.user={};
})

Now let me know to store the data in the user that as array with example

Upvotes: 0

Views: 4615

Answers (4)

Nitin Agarwal
Nitin Agarwal

Reputation: 941

Guys it was very simple and now i get. In HTML it should be like this,

<div ng-controller="RegisterController">
<form class="well" align="center">
<input ng-model="user.name" name="name"  type="text"><br/>
<input ng-model="user.mobile name="mobile"  type="text"><br/>
<input ng-model="user.mail" name="mail"  type="mail"><br/>
<input ng-model="user.password" type="password" name="otp"><br/><br/>
<button type="button" ng-click="signup(user)">Sign Up</button>
<a href="#/login">Login</a><br><br>
</form>
</div>

Now In Register Controller, i need just, an array as follows:

app.controller("RegisterController",function($scope){
$scope.regruser=[];
$scope.signup=function(user){
$scope.regruser.push(user);
}
})

Now you can get $scope.regruser where you needed. as it having all registered user.

Upvotes: 1

ANK
ANK

Reputation: 293

I think your doing a small mistake. Instead of sending the same ng-model="user.name" send is as,

<form class="well" align="center">
<input ng-model="user.name" name="name"  type="text"><br/>
<input ng-model="user.mobile name="mobile"  type="text"><br/>
<input ng-model="user.mail" name="mail"  type="mail"><br/>
<input ng-model="user.password" type="password" name="otp"><br/><br/>

<button type="button">Sign Up</button>
<a href="#/login">Login</a><br><br>
</form>

And you have to send that ng-model to the function as in button 

 <button type="button" ng-click="signup(user)">SignUp</button>

now you can able to get what you want

Upvotes: 2

Amulya Kashyap
Amulya Kashyap

Reputation: 2373

HTML PART

<form class="well" align="center">
    <input class="form-group" name="name"  type="text" placeholder="Enter Name" ng-model="user.name"><br/>
    <input class="form-group" name="mobile"  type="text" placeholder="Enter Mobile Number" ng-model="user.mobile"><br/>
    <input class="form-group" name="mail"  type="mail" placeholder="Enter mail id" ng-model="user.mail"><br/>
    <input class="form.group" type="password"  name="otp" placeholder="Enter Password" ng-model="user.password"><br/><br/>
    <button type="button" class="btn btn-warning btn-sm" ng-click="signUp()">Sign Up</button>
<a href="#/login">Login</a><br><br>
</form>

Code For Controller : 

$scope.user = {
   name: '',
   mobile: '',
   mail: '',
   password: ''
};

This answer is a correction to Andrejs Abrickis answer as well. Because:

  1. he misses comma after email
  2. he misses semi-colon after "}"
  3. Adds an extra dot in between $ & scope

Thanks You... Hope It Helps You all.. :)

Upvotes: 0

Andrejs Abrickis
Andrejs Abrickis

Reputation: 121

I don't see any benefit of storing the user model in an array. Instead extend the user model with properties name, mobileNumber, email, password

$.scope.user = {
   name: '',
   mobileNumber: '',
   email: ''
   password: ''
}

And in your html bind model properties to their corresponding input fields like

<input class="form-group" name="mobile"  type="text" placeholder="Enter Mobile Number" ng-model="user.name.mobileNumber"/>

And if you still need to have an array then parse the $scope.user model and extract values to array in angular controller.

Upvotes: 0

Related Questions