我需要使用 angularJS 将对象添加到数组

Question

我是 angularJS 的新手，目前正在努力将对象从表单添加到数组。当我单击 "Add New Product" 时它触发了 "newItemModal"，我输入了新产品信息但提交按钮不起作用。单击提交时，我需要将新产品添加到我的项目数组中。

此外，当我在 "newItemModal" 模式下填写新产品并使用 "Item Number" 列下的按钮关闭表格以打开 "editItemModal" 时，表格显示我在 "Add New Product" 表格中输入的相同信息。

HTML 代码

<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 代码

(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
        }        
    ];
});


})();

Answer 1

此处您将新产品对象推入 product 数组，但您应该将其推入 $scope.items 数组

试试这个

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

    $scope.product = {};
    };

Answer 2

进行以下更改并尝试，

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

到

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

在你的控制器中，

在这一行之后 $scope.product = {}; 添加 $scope.item= {};

将函数 addProduct 更改为

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

我认为现在控制器中不需要$scope.product。

我需要使用 angularJS 将对象添加到数组

I need to add an object to an array using angularJS

javascript

arrays

frontend

javascript-objects

angularjs