Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 104,959

HOME > PHP > PHP Forum > จะทำ edit multi rows โดยใช้ angular js แต่มีปัญหาครับ รบกวนชี้แนะหน่อยครับ


 

จะทำ edit multi rows โดยใช้ angular js แต่มีปัญหาครับ รบกวนชี้แนะหน่อยครับ

 



Topic : 118710



โพสกระทู้ ( 120 )
บทความ ( 0 )



สถานะออฟไลน์




คือผมต้องการ edit ข้อมูลใน ng-repeat
โดย data ที่กรอกหรือเปลี่ยนแปลงค่าผมอ้างอิงจาก index ที่ get มาในตอนแรก
var data = $scope.customers[index];
ปัญหามันมีอยู่ว่า เมื่อใช้ filter index มันจะเปลี่ยนไปครับ ทำให้เราไม่สามารถ อ้างอิงค่า index จากข้อมูลเดิมได้แล้ว
เลยอยากจะสอบถาม วิธีการ แก้ปัญหาในเคสแบบนี้หน่อยครับ

หรือว่า เวลาเค้าทำ edit แบบนี้ เขาทำกันยังไงหรือครับ รบกวนขอแนวทาง หรือชีแนะหน่อยครับ ขอบคุณครับ


// อันนี้ Code

หน้า PHP
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>&nbsp;
						<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>



หน้า scipt
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







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-09-04 09:05:03 By : tam78910 View : 620 Reply : 2
 

 

No. 1



โพสกระทู้ ( 120 )
บทความ ( 0 )



สถานะออฟไลน์


รบกวนขอคำชี้แนะหน่อยครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-09-05 08:53:44 By : tam78910
 


 

No. 2



โพสกระทู้ ( 120 )
บทความ ( 0 )



สถานะออฟไลน์


help me
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-09-07 15:08:06 By : tam78910
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : จะทำ edit multi rows โดยใช้ angular js แต่มีปัญหาครับ รบกวนชี้แนะหน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





เว็บไซต์เพื่อนพี่น้อง : Voake , Comcube , ขายอาหารเสริมลดน้ำหนัก , รถมือสอง , รับจดทะเบียนบริษัท ,vps | เช่า vps , รถกระบะมือสอง , รถมือสอง ไม่เกินแสน

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2018 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่