我正在创建一个在线餐厅订单系统。我正在使用codeigniter。在订单页面中,我使用了对网格进行过滤和排序的角度网格系统。 我想要做的是在每一行创建一个复选框。我单击与其对应的项目的复选框应添加到购物车。我正在使用codeigniter购物车类。 我的代码如下。
<html ng-app="myApp" ng-app lang="en"><head>
<title>Wah Bhai Wah</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/animate.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/bootstrap.css">
<script type="text/javascript" src="<?php echo base_url() ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/java.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>queries/insert_into_cart.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/bootstrap.js"></script>
<script type="text/javascript">
$(document).on("click", ".view_link", function() {
var id = $(this).data('id');
$(".modal-body #itemid").val( id );
var name = $(this).data('name');
$(".modal-body #itemname").val( name );
document.getElementById("descmodallabel").innerHTML = name;
var image = $(this).data('image');
document.getElementById("itemimagesrc").src = image;
$(".modal-body #itemimage").val( image );
var price = $(this).data('price');
$('.modal-body #itemprice').val( price );
});
</script>
</head>
<style>
.a
{
background-color:white;
}
body{
background: url("http://localhost/wah/images/slider/M3.png") fixed 100% 100%; background-size: cover;
}
.d{
background-color: green; height: 200px;
}
.c
{
background-color: yellow; height: 600px;
}
.item{
background-color: white; padding: 10px; margin-bottom: 20px;
box-shadow: 5px;-webkit-box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75);
box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75); border-radius: 6px;
}
.main
{
margin-top:200px;
}
.side-nav{background-color: white; padding: 30px; top:100px; }
table{
border-spacing: 0px;
border-collapse: separate;
}
td
{
padding-right: 20px; padding-top:10px;
}
.forms{background-color:white; padding-right:20px; margin-top:200px; position:static;}
</style>
<body>
<div class="modal fade" id="myModalmenu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Menu</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td>Item</td>
<td>Cost</td>
</tr><?php
foreach ($i as $items) {
?>
<tr>
<td>
<img src="<?php echo $items->img ?>" height="50px" width="50px">
<?php echo " ".ucfirst($items->item_name); ?>
</td>
<td>
<?php echo $items->price ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Cart</h4>
</div>
<div class="modal-body">
<table>
<tr><td>Item</td><td>Qty</td><td>Price</td><td>Total</td></tr>
<?php foreach($this->cart->contents() as $cart_items){ ?>
<tr>
<?php $id = $cart_items['rowid']; ?>
<?php echo form_open('cart_test/update/'.$id); ?>
<td><?php echo $cart_items['name'] ?></td>
<td><input type="number" class="span1" id="qty" value = "<?php echo $cart_items['qty'] ?>" name="qty"></td>
<td><?php echo $cart_items['price'] ?></td>
<td><?php echo $cart_items['subtotal'] ?> </td>
</tr>
<tr>
<td>
<a href="<?php echo base_url()?>cart_test/delete/<?php echo $id ?>" class="btn btn-primary">Remove</a>
</td>
<td>
<input type="submit" value="Update" class="btn btn-primary">
</td>
</form>
</tr>
<?php } ?>
<tr><td colspan="5" ><hr style="background-color: #000000"></td></tr>
<tr><td colspan="2">Item Total</td><td colspan="2"><b style="text-align: right"><?php echo $this->cart->total_items()?></b></td></tr>
<tr><td colspan="2">Bill Total</td><td colspan="2"><b style="text-align: right"><?php echo $this->cart->total()?></b></td></tr>
<tr><td colspan="5" ><hr style="background-color: #000000"></td></tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<?php
if($this->cart->total_items()==0)
{
?>
<a href="<?php echo base_url()?>cart_test/proceed_to_checkout" class="btn btn-primary disabled">Proceed To Checkout</a>
<?php
}
else
{
?>
<a href="<?php echo base_url()?>cart_test/proceed_to_checkout" class="btn btn-primary">Proceed To Checkout</a>
<?php
}
?>
</div>
</div>
</div>
</div>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Wah Bhai Wah</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ><a href="<?php echo base_url() ?>">Home</a></li>
<li class="active"><a href="<?php echo base_url() ?>main/order">order</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModalmenu">Menu</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="<?php echo base_url() ?>main/logout">Logout</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">View Cart <b style="background-color:red; -moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 450px; padding:15px;" ><?php echo count($this->cart->contents()) ?></b></a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div ng-controller="customersCrtl" class="main">
<div class="container">
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-condensed active" style="background-color:white; border-radius:6px; padding:20px;">
<thead>
<th class="success">Item Id <a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Item Name <a ng-click="sort_by('item_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Item <a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Price <a ng-click="sort_by('price');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Category <a ng-click="sort_by('category');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="danger">
<td>{{data.id}}</td>
<td><a href="#descmodal" data-id={{data.id}} data-name={{data.item_name}} data-image={{data.img}} data-price={{data.price}} data-toggle="modal" class="view_link">{{data.item_name}}</a></td>
<td><a href="#descmodal" data-id={{data.id}} data-name={{data.item_name}} data-image={{data.img}} data-price={{data.price}} data-toggle="modal" class="view_link"><img src={{data.img}} height="50px" width="50px"></a></td>
<td>{{data.price}}</td>
<td>{{data.category}}</td>
<td><a href="<?php echo base_url() ?>cart_test/add_to_cart/{{data.id}}/{{data.item_name}}/{{data.img}}/{{data.price}}">Add to Cart</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No Items found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url() ?>apps/js/angular.min.js"></script>
<script src="<?php echo base_url() ?>apps/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="<?php echo base_url() ?>apps/app/app.js"></script>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="descmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="descmodallabel"></h4>
</div>
<div class="modal-body">
<?php echo form_open('cart_test/add_from_desc') ?>
<input type="hidden" src="" value="" id="itemimage" >
<img src="" height="200" width="300px" id="itemimagesrc">
<input type="hidden" name="item_id" value="" id="itemid">
<input type="hidden" name="item_name" value="" id="itemname">
<input type="text" name="item_price" value="" id="itemprice">
<input type="number" name="quantity" value="" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add to Cart</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body
></html>