Angular JS - Training

by asanjum

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<div ng-app="my-app" ng-controller="AppController">
    <div ng-hide="record">
        <button ng-click="add()">Add</button>
        <table>
            <tr ng-repeat="record in records">
                <td>{{record.rollNo}}</td>
                <td>{{record.name}}</td>
                <td>{{record.objectId}}</td>
                <td>{{record.createdAt}}</td>
                <td ng-click="edit(record, $index)">edit</td>
                <td ng-click="remove(record, $index)">delete</td>
            </tr>
        </table>
    </div>
    <div ng-show="record">
        <input ng-model="record.rollNo" />
        <input ng-model="record.name" />
        <button ng-click="update()">Save</button>
    </div>
</div>

CSS

td {
    padding: 5px;
    border:1px solid lightgrey;
    border-collapse:collapse
}

JavaScript

var app = angular.module('my-app', [], ['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['X-Parse-Application-Id'] = 'CdtHCpaXixz7bwudAlWvvO12HiMaWqGOUbjDPPBC';
    $httpProvider.defaults.headers.common['X-Parse-REST-API-Key'] = 'IxMctPQYe9WCvRiyFL6aXEDpBpBfbLCx3Dh2oo4j';
}])

app.controller('AppController', ['$scope', '$http', function ($scope, $http) {

    $scope.load = function () {
        $scope.records = [];
        $http.get('https://api.parse.com/1/classes/NGClass02').success(function (data) {
            $scope.records = data.results;
        })
    }
    $scope.load();

    $scope.add = function () {
        $scope.record = {};
    }

    $scope.edit = function (record, index) {
        $scope.record = angular.copy(record);
        $scope.currIndex = index;
    }

    $scope.remove = function (record, index) {
        $scope.records.splice(index, 1);
        $http['delete']('https://api.parse.com/1/classes/NGClass02/' + record.objectId).success(function (data) {

        })

    }

    $scope.update = function () {
        if ($scope.record.objectId) {
            $http.put('https://api.parse.com/1/classes/NGClass02/' + $scope.record.objectId, $scope.record).success(function (data) {
                $scope.records.splice($scope.currIndex, 1, $scope.record);
                delete $scope.record;
                delete $scope.currIndex;
            })
        } else {
            $http.post('https://api.parse.com/1/classes/NGClass02', $scope.record).success(function (data) {
                $scope.record.objectId = data.objectId;
                $scope.record.createdAt = data.createdAt;
                $scope.records.push($scope.record);
                delete $scope.record;
            })
        }
    }

}])