Thursday 26 January 2017

DML opration tempolarly using angularjs

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta charset="utf-8" />
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="jquery-1.10.2.js"></script>
    <script src="angular.js"></script>
</head>
<body class="container" ng-app="app" ng-controller="ctrl">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-lg-4 control-label">EID</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EMP.EID" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">NAME</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EMP.NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">DEPARTMENT</label>
            <div class="col-lg-4">
                <select name="ddl" class="form-control"  ng-model="x" ng-options="c.DID as c.DNAME for c in listd">
                    <option value="">Select</option><Br />
                </select><input type="button" class="btn btn-primary" value="Add More" ng-click="addnew()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Update" ng-click="modify()" style="width:80px" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <table class="table table-bordered">
                    <thead class="btn-primary">
                        <tr>
                            <th>DID</th>
                            <th>DNAME</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="c in list">
                            <td>{{c.DID}}</td>
                            <td>{{c.DNAME}}</td>
                            <td><a ng-click="ed(c)">Edit</a>|<a ng-click="del(c)">Delete</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Update" ng-click="update()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Reset" ng-click="reset()" style="width:80px" />
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered">
                <thead class="btn-primary">
                    <tr>
                        <th>EID</th>
                        <th>NAME</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="c in liste">
                        <td>{{c.EID}}</td>
                        <td>{{c.NAME}}</td>
                        <td><a ng-click="edit(c.EID)">Edit</a>|<a ng-click="del1(c.EID)">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    angular.module("app", [])
    .controller("ctrl", function ($scope, $http) {
        $http.get("http://localhost:15497/api/Empservice/Getd").then(function (d) {
            $scope.listd = d.data;
        });
        var m = new Array();
        $scope.addnew = function ()
        {
 
            m.push({ DID: $scope.x,DNAME:$("[name='ddl'] :selected").text() });
            fill();

        }
        var v;
        $scope.ed = function (s)
        {
            v = s;
            $scope.x = s.DID;
        }
        $scope.modify = function ()
        {
            m.splice(m.indexOf(v), 1);
            m.push({ DID: $scope.x, DNAME: $("[name='ddl'] :selected").text() });
        }
        function fill()
        {
            $scope.list = m;
        }
        $scope.del = function (s)
        {
            if (m.length > 1)
            {
                m.splice(m.indexOf(s), 1);
            }
           
        }
        function CLR()
        {
            $scope.EMP = new emp();
            $scope.x = "";
            m.splice(0, m.length);
        } CLR();
        function fill1()
        {
            $http.get("http://localhost:15497/api/Empservice/Gets?i="+1).then(function (d) {
                $scope.liste = d.data;
               
            });
        } fill1();
        $scope.save = function ()
        {
            $scope.EMP.LDEPT = m;
            $http.post("http://localhost:15497/api/Empservice/Post",$scope.EMP).then(function (d) {
                alert(d.data);
                CLR();
                fill1();
            });
        }
        $scope.update = function () {
            $scope.EMP.LDEPT = m;
            $http.put("http://localhost:15497/api/Empservice/Put", $scope.EMP).then(function (d) {
                alert(d.data);
                CLR();
                fill1();
            });
        }
        $scope.edit = function (s)
        {
           
            $http.get("http://localhost:15497/api/Empservice/Get?EID=" + s + "&j=" + 2).then(function (d) {
                $scope.EMP = d.data;
                $scope.list = $scope.EMP.LDEPT;
                m = $scope.EMP.LDEPT;

            });
        }
        $scope.del1 = function (s)
        {
            if (confirm("Do you want to delete it ?"))
            {
                $http.delete("http://localhost:15497/api/Empservice/Delete?EID=" + s + "&i=" + 2 + "&j=" + 3).then(function (d) {
                    alert(d.data);
                    fill1();

                });
            }
           
        }
        $scope.reset=function()
        {
            CLR();
        }
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            LDEPT: {}
        }
    }
</script>

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)