How to create array of objects in angularJS

Question

I have few input fields like "Title" "firstname" "lastname" and "date" whose data I'm storing in an Object but I want to create an array of object for this data, so that every time I click submit button a new object should be pushed in the array.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Angular Basic</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>

<body ng-controller="myCtrl">
    <form>
        <md-input-container>
            <label>Title</label>
            <input ng-model="user.title">
        </md-input-container>
        <md-input-container>
            <label>First Name</label>
            <input ng-model="user.first_name">
        </md-input-container>
        <md-input-container>
            <label>Last Name</label>
            <input ng-model="user.last_name">
        </md-input-container>
        <md-input-container>
            <label>Enter date</label>
            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
        </md-input-container>
        <md-button class="md-raised md-warn" ng-click="saveData()">Submit</md-button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

JS file:

var app = angular.module('myApp', ['ngMaterial']).controller('myCtrl', function ($scope) {
    $scope.user = {}
    var userArr = [];

    $scope.saveData = function () {
        console.log("user", $scope.user)
        userArr.push(user);
        console.log(userArr);
    }
})

userArr.push($scope.user); you should do like this...

McRist
– McRist

2018-08-22 14:24:00 +00:00
Commented Aug 22, 2018 at 14:24 — McRist
– McRist, Commented Aug 22, 2018 at 14:24
@McRist thank you.. It worked.

Adarsh
– Adarsh

2018-08-22 14:29:35 +00:00
Commented Aug 22, 2018 at 14:29 — Adarsh
– Adarsh, Commented Aug 22, 2018 at 14:29

McRist · Accepted Answer · 2018-08-22 14:32:04Z

3

You missed $scope from user.

 var app = angular.module('myApp', ['ngMaterial']).controller('myCtrl', 
    function ($scope) {
        $scope.user = {}
        var userArr = [];

        $scope.saveData = function () {
            console.log("user", $scope.user)
            userArr.push($scope.user)
            console.log(userArr);
        }
    })

answered Aug 22, 2018 at 14:32

McRist

1,77811 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create array of objects in angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related