จะทำ edit multi rows โดยใช้ angular js แต่มีปัญหาครับ รบกวนชี้แนะหน่อยครับ
คือผมต้องการ edit ข้อมูลใน ng-repeat Code (PHP) <!doctype html>
<html ng-app="om">
<head>
<title><?php echo $page_header;?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');?>
<script type="text/javascript">
var site_url = "<?php echo site_url();?>";
</script>
<script src="<?php echo base_url();?>js/jquery.js"></script>
<script src="<?php echo base_url();?>js/angular.min.js"></script>
<script src="<?php echo base_url();?>js/app-om.js"></script>
<script src="<?php echo base_url();?>js/jquery.mousewheel.pack.js"></script>
<script src="<?php echo base_url();?>js/jquery.fancybox.pack.js"></script>
<script src="<?php echo base_url();?>js/jquery-ui.js"></script>
<script src="<?php echo base_url();?>bootstrap/js/bootstrap.js"></script>
<script src="<?php echo base_url();?>hightchart/js/highcharts.js"></script>
<script src="<?php echo base_url();?>hightchart/js/modules/exporting.js"></script>
<link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo base_url();?>css/jquery-ui.css">
<link rel="stylesheet" href="<?php echo base_url();?>css/jquery.fancybox.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
FFT
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="<?php echo site_url('home');?>">HOME</a></li>
<?php foreach($h_group as $header_m):?>
<li><a href="<?php echo site_url($header_m->path_head);?>"><?php echo $header_m->h_group;?></a></li>
<?php endforeach;?>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"> <?php echo $this->session->userdata('s_username');?></span><span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Setting</a></li>
<li><a href="#">Change Password</a></li>
<li><a href="<?php echo site_url('login/logout');?>" class="glyphicon glyphicon-off" aria-hidden="true"> LOGOUT</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-md-2">
<div class="row">
<ul class="list-group">
<?php foreach($list_menu as $menu):?>
<li class="list-group-item"><a href="<?php echo site_url($menu->path);?>"><?php echo $menu->message;?></a></li>
<?php endforeach;?>
</ul>
</div>
</div>
<div class="col-md-10" ng-controller="OMController">
<h2><?php print_r($page_header);?></h2>
<div class="row">
<div class="col-md-4"><input type="text" class="form-control" ng-model="search" placeholder="Search for..."></div>
<a href="javascript:void(0)" class="btn btn-success" ng-click="addMode=!addMode">+</a>
</div>
<table class="table table-hover">
<thead>
<th>Action</th>
<th>Sale Office</th>
<th>Customer Name</th>
<th>Customer Address</th>
<th>Invoice To</th>
<th>Vat / Tax No.</th>
<th>Eori / Customer Code.</th>
<th>Payment Term (Days)</th>
</thead>
<tbody>
<tr id=loading>
<td align="center" colspan="15"><img src="<?php echo base_url();?>img/loading.gif"</td>
</tr>
<tr ng-show="addMode">
<td>
<a href="javascript:void(0)" ng-show="addMode" ng-click="addMode=!addMode"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span></a>
</td>
<td ng-show="addMode"><input type="text" class="form-control" name="customer_name" ng-model="sale_office"></td>
<td ng-show="addMode"><input type="text" class="form-control" name="customer_name" ng-model="customer_name"></td>
<td ng-show="addMode"><input type="text" class="form-control" name="customer_address" ng-model="customer_address"></td>
<td ng-show="addMode"><input type="text" class="form-control" name="invoice_to" ng-model="invoice_to"></td>
<td ng-show="addMode"><input type="text" class="form-control" name="vat_no" ng-model="vat_no"></td>
<td ng-show="addMode"><input type="text" class="form-control" name="eori" ng-model="eori"></td>
<td ng-show="addMode"><input type="text" class="form-control" name="payment_term" ng-model="payment_term"></td>
</tr>
<tr ng-repeat="e in customers | filter:search ">
<td>
<a href="javascript:void(0)" ng-show="editMode" ng-click="editCustomer(e.id,$index);editMode=!editMode"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span></a>
<a href="javascript:void(0)" ng-show="!editMode" ng-click="editMode=!editMode"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
<a href="javascript:void(0)" ng-show="!editMode" ng-click="deleteCustomer(e.id,$index)" ><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
<td ng-show="!editMode">{{ e.sale_office }}</td>
<td ng-show="editMode">{{ e.sale_office }}</td>
<td ng-show="!editMode">{{ e.customer_name }}</td>
<td ng-show="editMode"><input type="text" class="form-control" name="customer_name" ng-model="e.customer_name"></td>
<td ng-show="!editMode">{{ e.customer_address }}</td>
<td ng-show="editMode"><input type="text" class="form-control" name="customer_address" ng-model="e.customer_address"></td>
<td ng-show="!editMode">{{ e.invoice_to }}</td>
<td ng-show="editMode"><input type="text" class="form-control" name="invoice_to" ng-model="e.invoice_to"></td>
<td ng-show="!editMode">{{ e.vat_no }}</td>
<td ng-show="editMode"><input type="text" class="form-control" name="vat_no" ng-model="e.vat_no"></td>
<td ng-show="!editMode">{{ e.eori }}</td>
<td ng-show="editMode"><input type="text" class="form-control" name="eori" ng-model="e.eori"></td>
<td ng-show="!editMode">{{ e.payment_term }}</td>
<td ng-show="editMode"><input type="text" class="form-control" name="payment_term" ng-model="e.payment_term"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Code (JavaScript)
var app = angular.module('om',[]);
app.constant("api_url",site_url);
app.factory('OMFactory',function($http,$q,api_url){
return {
get_customer: function(){
var defer = $q.defer();
$http.get(api_url+'om/get_all_customer')
.success(function(data){
defer.resolve(data);
});
return defer.promise;
},
deleteCustomer : function(id){
var defer = $q.defer()
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
$http.post(api_url+'om/deletecustomer/'+id)
.success(function(data){
defer.resolve(data);
});
return defer.promise;
},
updateCustomer : function(data){
var defer = $q.defer()
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
$http.post(api_url+'om/editcustomer/',data)
.success(function(data){
defer.resolve(data);
});
return defer.promise;
}
};
});
app.controller('OMController',
function($scope,OMFactory){
$scope.OMFactory = OMFactory.get_customer()
.then(function(data){
$('#loading').hide();
$scope.customers = data;
});
$scope.deleteCustomer = function(id,index){
$scope.customers.splice(index,1);
OMFactory.deleteCustomer(id)
.then(function(data){
console.log(data);
});
},
$scope.editCustomer = function(id,index){
$scope.editMode = false;
var data = $scope.customers[index];
OMFactory.updateCustomer(data)
.then(function(dt){
console.log(dt);
});
}
});
Tag PHP, HTML/CSS, JavaScript
Date :
2015-09-04 09:05:03By :
tam78910View :
1749Reply :
2
รบกวนขอคำชี้แนะหน่อยครับ
Date :
2015-09-05 08:53:44By :
tam78910
help me
Date :
2015-09-07 15:08:06By :
tam78910
Server 02
Load balance : Server 02
