CRUD in Angularjs
아래 사이트에서 angularjs 코드를 봤지만, 크롬에서만 스크립트 오류 없이 잘된다.
아직 ie 11 버전에서는 .bind 라는 함수에서 오류 발생되어, jquery 버전과 angularjs 버전을
재확인해 봐야 할 듯 함.
http://www.codeproject.com/Tips/872181/CRUD-in-Angular-js
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-controller="empcontroller">
<table>
<tbody>
<!-- This table is to enter data-->
<tr>
<td>Enter ID: </td>
<td>
<input type="text" ng-model="id" /></td>
</tr>
<tr>
<td>Enter Name: </td>
<td>
<input type="text" ng-model="name" /></td>
</tr>
<tr>
<td>Enter Designation: </td>
<td>
<input type="text" ng-model="desg" /></td>
</tr>
<tr>
<td>
<input type="button" ng-click="btnclk()" value="Save" /></td>
<td>
<input type="button" ng-click="btnupd(id,name,desg)" value="Update" /></td>
</tr>
</tbody>
</table>
<table>
<!--This table is to display the data-->
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Designation</td>
</tr>
</thead>
<tbody ng-repeat="emp in emparr">
<tr>
<td ng-bind="emp.arr_id"></td>
<td ng-bind="emp.arr_name"></td>
<td ng-bind="emp.arr_desg"></td>
<td>
<input type="button" ng-click="edit(emp,emparr.indexOf(emp))" value="Edit" /></td>
<td>
<input type="button" ng-click="del(emparr.indexOf(emp))" value="Delete" /></td>
</tr>
</tbody>
</table>
</div>
<script>
function empcontroller($scope) {
$scope.emparr = [];
$scope.btnclk = function () {
if (!$scope.id) {
alert("Enter ID");
}
else if (!$scope.name) {
alert("Enter Name");
}
else if (!$scope.desg) {
alert("Enter Designation");
}
else {
$scope.emparr.push({ 'arr_id': $scope.id, 'arr_name': $scope.name, 'arr_desg': $scope.desg });
$scope.id = '';
$scope.name = '';
$scope.desg = '';
}
};
var key;
$scope.edit = function (emp, indx) {
key = indx;
$scope.id = emp.arr_id;
$scope.name = emp.arr_name;
$scope.desg = emp.arr_desg;
};
$scope.btnupd = function (id, name, desg) {
$scope.emparr[key].arr_id = id;
$scope.emparr[key].arr_name = name;
$scope.emparr[key].arr_desg = desg;
$scope.id = '';
$scope.name = '';
$scope.desg = '';
};
$scope.del = function (id) {
$scope.emparr.splice(id, 1);
};
}
</script>
</form>
</body>
</html>