Javascript 我需要使用angularJS向数组中添加一个对象
我是angularJS的新手，目前正在努力将一个对象从表单添加到数组中。当我单击“添加新产品”时，它会触发“newItemModal”，我输入新产品信息，但“提交”按钮不起作用。我需要在单击submit时将新产品添加到我的items数组中Javascript 我需要使用angularJS向数组中添加一个对象,javascript,angularjs,arrays,frontend,javascript-objects,Javascript,Angularjs,Arrays,Frontend,Javascript Objects,我是angularJS的新手，目前正在努力将一个对象从表单添加到数组中。当我单击“添加新产品”时，它会触发“newItemModal”，我输入新产品信息，但“提交”按钮不起作用。我需要在单击submit时将新产品添加到我的items数组中 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
<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">×</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">×</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>
<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">×</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">×</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>
<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">×</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">×</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>
在这里，您正在将新产品对象推送到
product$scope.items<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">×</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">×</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>
<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">×</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">×</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>
$scope.addProduct = function(product){
console.log("it worked")
$scope.product.createdOn = Date.now();
$scope.items.push($scope.product);
$scope.product = {};
};
在这里，您正在将新产品对象推送到
product$scope.items<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">×</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">×</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>
<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">×</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">×</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>
$scope.addProduct = function(product){
console.log("it worked")
$scope.product.createdOn = Date.now();
$scope.items.push($scope.product);
$scope.product = {};
};
进行以下更改并尝试
<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">×</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">×</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>
<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">
我认为现在控制器中不需要
$scope.product<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">×</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">×</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>
<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">
我认为现在控制器中不需要
$scope.product$scope.items.push（$scope.product）ng controller=“InventoryController as inventoryCtrl”ng submit=“inventoryCtrl.addProduct（item）”$scope>分配方法和属性。选择一个，坚持下去汉克斯，我现在有进展了。正在调用该函数，控制台中会显示console.log（“it worked”）。但是，现在当我尝试在控制台中显示产品时，它被列为未定义。我正在将不正确的信息传递给函数？您的意思是$scope.items.push（$scope.product）
？另外，您正在使用ng controller=“InventoryController as inventoryCtrl”
和ng submit=“inventoryCtrl.addProduct（item）”
但是您将方法和属性分配给$scope
。选择一个，坚持下去汉克斯，我现在有进展了。正在调用该函数，控制台中会显示console.log（“it worked”）。但是，现在当我尝试在控制台中显示产品时，它被列为未定义。我正在向函数传递错误的信息？我能够修复它，它现在正在工作。我还从from-through ng模型中传递的变量中删除了控制器名称。当我在console.log中记录产品时，它会正确地显示它。但是，当我关闭表单时，该表不会更新新产品的详细信息。这是为什么？“关闭表单”是指在浏览器上关闭应用程序时吗？不是，当我点击模式窗口上的“关闭”并打开另一个模式时，我必须编辑产品。我能够修复它，它现在正在工作。我还从from-through ng模型中传递的变量中删除了控制器名称。当我在console.log中记录产品时，它会正确地显示它。但是，当我关闭表单时，该表不会更新新产品的详细信息。为什么？“关闭表单”是指当您在浏览器上关闭应用程序时？不，当我点击模式窗口上的“关闭”并打开其他模式时，我必须编辑产品。
<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">×</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">×</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>