0

I'm new to angularJS and currently struggling to add an object from a form to an array. When I click the "Add New Product" it triggers the "newItemModal", I enter the new product information but submit button doesn't work. I need the new product to be added to my items array when I click on submit.

Also, when I fill out the new product under the "newItemModal" modal and I close the form to open the "editItemModal" using the button under the "Item Number" column, the form displays the same information I had entered under the "Add New Product" form.

HTML CODE 

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bodega Ilusion</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div id="wrapper">

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-8">
            <h1 class="page-header">Inventario</h1>
        </div>
    </div>

    <div class="row">
        <div ng-controller="InventoryController as inventoryCtrl">

        <div class="container">
        <!-- Trigger the modal with a button -->
            <div class="row">
                <div class="col-sm-8"></div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newItemModal">Add New Product</button>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-1"></div>        
                <div class="col-sm-9"><br>
                    <div class="panel panel-default">
                        <div class="panel-heading"></div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="dataTables_length" id="dataTables-example_length">
                                        <label>Show 
                                            <select ng-model="rowLimit" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm">
                                                <option value="1">1</option>
                                                <option value="3">3</option>
                                                <option value="5">5</option>
                                                <option value="10">10</option>
                                            </select> entries
                                        </label>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div id="dataTables-example_filter" class="dataTables_filter">
                                        <label>Search:
                                            <input ng-model="search" type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example">
                                        </label>
                                    </div>
                                </div>
                            </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
                                    <thead>
                                        <tr role="row">
                                            <th style="width: 50px;" ng-click="sortData('index')">Item Number</th>
                                            <th style="width: 50px;" ng-click="sortData('code')">Code</th>
                                            <th style="width: 250px;" ng-click="sortData('description')">Description</th>
                                            <th style="width: 50px;" ng-click="sortData('in')">In</th>
                                            <th style="width: 50px;" ng-click="sortData('out')">Out</th>
                                            <th style="width: 50px;" ng-click="sortData('total')">Total</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr class="gradeA odd" role="row" ng-repeat="product in items | limitTo: rowLimit | filter: search">
                                            <td class="text-center">
                                              <i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="edit(product)"
                                              data-toggle="modal" data-target="#editItemModal"></i>
                                              <i class="fa fa-trash-o" aria-hidden="true" ng-click="delete(product)"></i>{{1+$index}}</td>
                                            <td class="text-center">{{product.code}}</td>
                                            <td class="text-left">{{product.description}}</td>
                                            <td class="text-center">{{product.in}}</td>
                                            <td class="text-center">{{product.out}}</td>
                                            <td class="text-center">{{product.total}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        </div>
                    <!-- /.table-responsive -->

                    </div>
                    <!-- /.panel-body -->
                    </div>
            <!-- /.panel -->
            </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="editItemModal" role="dialog">
                <div class="modal-dialog">

                <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">{{1+$index}}</h4>
                        </div>

                    <div class="modal-body">
                        <form name="myForm" novalidate>
                            <div class="form-group">
                                <label for="code">Code:</label>
                                <input type="text" size="5" maxlength="5" class="form-control" name="code" id="code" 
                                ng-model="inventoryCtrl.item.code" required>
                                <span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>    
                            </div>

                            <div class="form-group">
                                <label for="description">Description:</label>
                                <input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required>  
                                <span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>   
                            </div>

                            <div class="form-group">
                                <label for="amount">Amount:</label>
                                <input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount" 
                                ng-model="inventoryCtrl.item.amount" required> 
                                <span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
                            </div>

                            <div class="form-group">
                                <label for="date">Date:</label>
                                <input type="date" class="form-control" name="date" id="date" required>
                                <span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>    
                            </div>

                            <div class="form-group">
                                <label for="radio">Type:</label>
                                <div class="radio">
                                    <label><input type="radio" name="optradio" ng-model="type" value="in">In</label>
                                    <label><input type="radio" name="optradio" ng-model="type" value="out">Out</label>
                                </div>
                            </div>                
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Submit</button>
                    </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="newItemModal" role="dialog">
                <div class="modal-dialog">

                <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Add New Product</h4>
                        </div>

                    <div class="modal-body">
                        <form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">
                            <div class="form-group">
                                <label for="code">Code:</label>
                                <input type="text" size="5" maxlength="5" class="form-control" name="code" id="code" 
                                ng-model="inventoryCtrl.item.code" required>
                                <span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>    
                            </div>

                            <div class="form-group">
                                <label for="description">Description:</label>
                                <input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required>  
                                <span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>   
                            </div>

                            <div class="form-group">
                                <label for="amount">Amount:</label>
                                <input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount" 
                                ng-model="inventoryCtrl.item.amount" required> 
                                <span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
                            </div>

<!--                            <div class="form-group">
                                <label for="date">Date:</label>
                                <input type="date" class="form-control" name="date" id="date" required>
                                <span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>    
                            </div>-->

                            <div class="modal-footer">
                                <input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
                                <input type="submit" class="btn btn-primary pull-right" value="Submit" />

                            </div>               

                        </form>
                    </div>

                    </div>
                </div>
            </div>
        </div>


        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /#page-wrapper -->

</div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- jQuery -->
    <script src="../vendor/angular/angular.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="../vendor/raphael/raphael.min.js"></script>
    <script src="../vendor/morrisjs/morris.min.js"></script>
    <script src="../data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

    <!-- My AngularJS App -->
    <script src="../js/app.js"></script>

</body>

</html>

AngularJS CODE

(function(){
var app = angular.module("inventory", []);

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

    $scope.product = {};

    $scope.addProduct = function(product){
        console.log("it worked")
        $scope.product.createdOn = Date.now();
        product.push($scope.product);

    $scope.product = {};
    };

    $scope.items = [
        {
        code:"FD1",
        description: "Happy valentines",
        in: 50,
        out: 20,
        total: 30,
        createdOn: 1397490980837
        },
        {
        code:"FD2",
        description: "Happy Mothers Day",
        in: 70,
        out: 20,
        total: 50,
        createdOn: 1397490980837            
        },
        {
        code:"FD3",
        description: "I Love You",
        in: 100,
        out: 30,
        total: 70,
        createdOn: 1397490980837
        },
        {
        code:"FD4",
        description: "Get Well",
        in: 20,
        out: 5,
        total: 15,
        createdOn: 1397490980837
        },
        {
        code:"FD5",
        description: "Happy Birthday",
        in: 200,
        out: 35,
        total: 165,
        createdOn: 1397490980837
        },
        {
        code:"FD6",
        description: "It's a Boy",
        in: 50,
        out: 10,
        total: 40,
        createdOn: 1397490980837
        },
        {
        code:"FD7",
        description: "It's a Girl",
        in: 50,
        out: 20,
        total: 30,
        createdOn: 1397490980837
        }        
    ];
});


})();
Improve this question
3
  • 1
    Did you mean $scope.items.push($scope.product)? Commented Feb 7, 2017 at 4:43
  • 1
    Also, you're using ng-controller="InventoryController as inventoryCtrl" and ng-submit="inventoryCtrl.addProduct(item)" yet you assign methods and properties to $scope. Choose one and stick to it Commented Feb 7, 2017 at 4:46
  • Thanks, I'm getting somewhere now. The function is being called, and the console.log("it worked") appears in the console. However, now when I try to display the product in the console, it's listed as undefined. I'm I passing the incorrect info to the function? Commented Feb 7, 2017 at 4:53

2 Answers 2

Reset to default
1

Here you are pushing new product object in to product array, But you should push it into your $scope.items array

Try this one

    $scope.addProduct = function(product){
        console.log("it worked")
        $scope.product.createdOn = Date.now();
        $scope.items.push($scope.product);

    $scope.product = {};
    };
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I was able to fix it and it's working now. I also removed the controler name from the variables being passed in the from through ng-model. When I console.log the product, it show it correctly. However, when I close the form the table is not updated with the details of the new product. Why is that?
'close the form' does it mean when you close the application on browser?
No when I hit close on the modal window and open the other modal I have to edit the product.
1

Make following changes and try,

<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">

to

<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(inventoryCtrl.item)">

in your controller,

after this line $scope.product = {}; add $scope.item= {};

change the function addProduct to 

$scope.addProduct = function(product){
   console.log("it worked")
   product.createdOn = Date.now();
   $scope.items.push(product);
};

I think there is no need of $scope.product in controller now.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.