I want to store the form data into the an array(it is an array of objects) which is declared in controllers. Each time the form is submitted, the Form data in the format of an object should get appended in the array called expenses. The code is -

controller.js

angular.module('myApp.controllers', [])
 .controller('expenseForm', function($scope, $location) {
  $scope.expenses = [{
  exTitle: "",
  amount: "",
  typeOfShare: "",
  date: ""
 }];
 $scope.**submitExpense** = function (expenseInfo) {

 }
});

---

expense.html

<form class="clearBoth" ng-controller="expenseForm" ng-submit="submitExpense(expenseInfo)">
    <div class="expenseDesc" ng-model="expenseInfo">
        <div class="leftDesc">
            <div class="item">
                <label for="title">Expense Title</label>
                <input type="text" id="exTitle" name="title" ng-model="expenseInfo.exTitle"/>
            </div>
            <div class="item">
                <label for="amount">Total Amount Spend</label>
                <input type="text" id="totAmt" name="amount" ng-model="expenseInfo.amount"/>
            </div>
            <div class="item">
                <label for="shareType">Type of Share</label>
                <select name="shareType" ng-model="expenseInfo.typeOfShare">
                    <option value="equal">Equal</option>
                    <option value="unequal">Unequal</option>
                </select>
            </div>
        </div>
        <div class="rightDesc">
            <div class="item">
                <label for="date">Date</label>
                <input type="text" id="date" name="date" ng-model="expenseInfo.date"/>
            </div>
        </div>
        <!-- <div class="lowerSection">
            <div class="expenseTable clearBoth">
                <div class="tblHeader row">
                    <div class="sNo">SNo.</div>
                    <div class="email">Email</div>
                    <div class="name">Name</div>
                    <div class="share">Share</div>
                    <div class="paid">Paid</div>
                    <div class="owesTo">Owes To</div>
                    <div class="getsFrom">Gets From</div>
                    <div></div>
                </div>
                <div class="tblBody">
                    <div class="row">
                        <div class="sNo">1</div>
                        <div class="email">[email protected]</div>
                        <div class="name">Neha</div>
                        <div class="share">700</div>
                        <div class="paid">500</div>
                        <div class="owesTo">200 to Sneha</div>
                        <div class="getsFrom"></div>
                        <div></div>
                    </div>
                </div>
                <div class="tblFooter clearBoth">
                    <button id="addMember">Add Member</button>
                </div>
            </div>
        </div> -->

    </div> <!--end of expenseDesc-->
    <input type="submit" value="AddExpense" class="clearBoth" />
</form>

Here i am declaring a expenseInfo variable in the html page, which will contain all the details such as title, date etc. What should i write in submitExpense function so that this object gets appended in the expenses array?

I want to store the form data into the an array(it is an array of objects) which is declared in controllers. Each time the form is submitted, the Form data in the format of an object should get appended in the array called expenses. The code is -

controller.js

angular.module('myApp.controllers', [])
 .controller('expenseForm', function($scope, $location) {
  $scope.expenses = [{
  exTitle: "",
  amount: "",
  typeOfShare: "",
  date: ""
 }];
 $scope.**submitExpense** = function (expenseInfo) {

 }
});

---

expense.html

<form class="clearBoth" ng-controller="expenseForm" ng-submit="submitExpense(expenseInfo)">
    <div class="expenseDesc" ng-model="expenseInfo">
        <div class="leftDesc">
            <div class="item">
                <label for="title">Expense Title</label>
                <input type="text" id="exTitle" name="title" ng-model="expenseInfo.exTitle"/>
            </div>
            <div class="item">
                <label for="amount">Total Amount Spend</label>
                <input type="text" id="totAmt" name="amount" ng-model="expenseInfo.amount"/>
            </div>
            <div class="item">
                <label for="shareType">Type of Share</label>
                <select name="shareType" ng-model="expenseInfo.typeOfShare">
                    <option value="equal">Equal</option>
                    <option value="unequal">Unequal</option>
                </select>
            </div>
        </div>
        <div class="rightDesc">
            <div class="item">
                <label for="date">Date</label>
                <input type="text" id="date" name="date" ng-model="expenseInfo.date"/>
            </div>
        </div>
        <!-- <div class="lowerSection">
            <div class="expenseTable clearBoth">
                <div class="tblHeader row">
                    <div class="sNo">SNo.</div>
                    <div class="email">Email</div>
                    <div class="name">Name</div>
                    <div class="share">Share</div>
                    <div class="paid">Paid</div>
                    <div class="owesTo">Owes To</div>
                    <div class="getsFrom">Gets From</div>
                    <div></div>
                </div>
                <div class="tblBody">
                    <div class="row">
                        <div class="sNo">1</div>
                        <div class="email">[email protected]</div>
                        <div class="name">Neha</div>
                        <div class="share">700</div>
                        <div class="paid">500</div>
                        <div class="owesTo">200 to Sneha</div>
                        <div class="getsFrom"></div>
                        <div></div>
                    </div>
                </div>
                <div class="tblFooter clearBoth">
                    <button id="addMember">Add Member</button>
                </div>
            </div>
        </div> -->

    </div> <!--end of expenseDesc-->
    <input type="submit" value="AddExpense" class="clearBoth" />
</form>

Here i am declaring a expenseInfo variable in the html page, which will contain all the details such as title, date etc. What should i write in submitExpense function so that this object gets appended in the expenses array?

• javascript
• angularjs

Share Improve this question Follow edited May 25, 2014 at 11:46 Maxim Shoustin 77.9k2929 gold badges210210 silver badges228228 bronze badges asked May 25, 2014 at 11:23 Neha GuptaNeha Gupta 1,06755 gold badges1818 silver badges3636 bronze badges 1

• 1 expenses.push(JSON.parse(JSON.stringify(expenseInfo)) (the parse and stringify are for making a copy) – Benjamin Gruenbaum Commented May 25, 2014 at 11:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Just use push mand:

 $scope.submitExpense = function (expenseInfo) {
    $scope.expenses.push(expenseInfo);
 }

see Demo in Fiddle