Thêm record vào bảng

Thach Huynh

Mình có làm một trang như thế này:
alt text
Dấu + để add thêm 1 dòng vào bảng và dấu x để xóa đi 1 dòng nào đó. Bây giờ mình muốn khi nhấn Save and apply thì angularjs sẽ lấy mảng các record HIỆN TẠI và gửi lên server để update vào database. Nhưng hiện tại mình chưa biết làm thế nào. Các bạn có ý kiến gì đóng góp cho mình với. Vì cái này động, không biết trước được số lượng hàng tạo ra là bao nhiêu nên mình không biết angularjs lấy giá trị như thế nào
Code như sau:
index.html:

                          <thead>
                            <tr>
                                <th></th>
                                <th>Start time</th>
                                <th>End time</th>
                                <th>Last time</th>
                                <th>Delay time</th>
                                <th></th>
                            </tr>
                          </thead>
                          <tbody>
                                <tr>
                                    <td><i class="glyphicon glyphicon-ok-circle"></i></td>
                                    <td><input type="time" class="form-control" id="start-time" placeholder="start time"></td>
                                    <td><input type="time" class="form-control" id="end-time" placeholder="end time"></td>
                                    <td><input type="number" class="form-control" id="last-time" placeholder="last time"></td>
                                    <td><input type="number" class="form-control" id="delay-time" placeholder="delay time"></td>
                                    <td><button class="button add-item-button" onclick="deleteRow(this)"><i class="glyphicon glyphicon-remove"></i></button> </td>
                                </tr>
                          </tbody>
                        </table>

file javascript:

function deleteRow(row)
{

var i=row.parentNode.parentNode.rowIndex;
document.getElementById('time-settings').deleteRow(i);

}

function insRow() {
var table = document.getElementById("time-settings");
var row = table.insertRow(table.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "<i class="glyphicon glyphicon-ok-circle"></i>";
cell2.innerHTML = "<input type="time" class="form-control" id="start-time" placeholder="start time">";
cell3.innerHTML = "<input type="time" class="form-control" id="end-time" placeholder="end time">";
cell4.innerHTML = "<input type="number" class="form-control" id="last-time" placeholder="last time">";
cell5.innerHTML = "<input type="number" class="form-control" id="delay-time" placeholder="delay time">";
cell6.innerHTML = "<button class="button add-item-button" onclick="deleteRow(this)"><i class="glyphicon glyphicon-remove"></i></button>";
}

các function insertRow và deleteRow tương ứng vs các dấu + và dấu x trong bảng.

hidemanvn

@Thach-Huynh Post trong mục Angular mà code bạn chẳng dùng tẹo nào vậy ?

<!DOCTYPE html>
<html lang="en-US">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<body ng-app="myApp">
		<div ng-controller='ctrlProduct'>
			<tbody>
				<tr>
					<!-- inputs with object model -->
					<td><input ng-model='time.start' type="text" class="form-control" id="start-time" placeholder="start time"></td>
					<td><input ng-model='time.end' type="text" class="form-control" id="end-time" placeholder="end time"></td>
					<td><input  ng-model='time.last' type="text" class="form-control" id="last-time" placeholder="last time"></td>
					<td><input  ng-model='time.delay' type="text" class="form-control" id="delay-time" placeholder="delay time"></td>
				</tr>
				<!-- Add event -->
				<button ng-click='add()'>Add</button>
			</tbody>
			<ul>
			<!-- Display timeArr, Duplicates in the repeater are allowed.” -->
				<li ng-repeat='item in timeArr track by $index'>
					{{item.start}}---{{item.end}}---{{item.last}}---{{item.delay}}
					<!-- Remove event by Index of item. -->
					<button ng-click='remove($index)'>&times;</button>
				</li>
			</ul>
		</div>
	</body>
	<script>
	var app = angular.module('myApp', []);
	app.controller('ctrlProduct', function($scope) {
		// init
		$scope.timeArr=[];
		// add event controller
		$scope.add = function(){
			$scope.timeArr[$scope.timeArr.length]=$scope.time;
			// reset inputs, Initialize new object model.
			$scope.time={};
		}
		// remove event controller
		$scope.remove=function(index){
			$scope.timeArr.splice(index, 1);
		}
	});
	</script>
</html>

Thach Huynh

Thì mình đang nhờ tìm hướng giải quyết bằng angularjs mà. cảm ơn bạn

joseph

@Thach-Huynh :
ban đầu bạn hãy khai báo một array:
var dateNow = new Date();
$scope.listTime = [
{start: dateNow, end: dateNow, last: dateNow, delay: dateNow}
];

Chỗ code html tạo table bạn dùng ng-repeat cho <tr>:
<tr ng-repeat="time in listTime">
<td ng-model="time.start">
<td ng-model="time.end">
<td ng-model="time.last">
<td ng-model="time.delay">
</tr>

button add giữ nguyên:
<button ng-click="insertRow()">Add</button>
nhưng trong controller bạn sẽ khai báo hàm như sau:
$scope.insertRow = function () {
$scope.listTime.push({start: dateNow, end: dateNow, last: dateNow, delay: dateNow});
}

button delete cho nó nằm trong <tr> ng-repeat ở trên để get dc $index của mỗi item.
<table>
<thead>
<tr>
<th></th>
<th>Start time</th>
<th>End time</th>
<th>Last time</th>
<th>Delay time</th>
<th></th>
</tr>
</thead>
<tbody>

khai báo hàm trong controller:
$scope.deleteRow= function (index) {
$scope.listTime.splice(index, 1);
}

button save and submit:
<button ng-click="saveAndSubmit()"></button>
controller:
$scope.saveAndSubmit = function () {
//send $scope.listTime
}