관리 메뉴

심재운 블로그

CRUD in Angularjs 본문

프로그래밍/AngularJS

CRUD in Angularjs

재우니 2015. 2. 9. 16:59

아래 사이트에서 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>

Tag
0 Comments
댓글쓰기 폼