sumitridhal · April 28, 2017 06:11 · Apr 28, 2017 · Apr 28, 2017 · Apr 18, 2017 · Apr 18, 2017
diff --git a/angular-curd.markdown b/angular-curd.markdown
@@ -1,6 +1,7 @@
 Angular  CURD
 -------------
 
+![header](https://cloud.githubusercontent.com/assets/2717960/25132241/8742b17a-2466-11e7-8768-3b6c72aa55c1.png "Logo")
 
 A [Pen](http://codepen.io/sumitridhal/pen/YVPQdW) by [sumitridhal](http://codepen.io/sumitridhal) on [CodePen](http://codepen.io/).
 

diff --git a/angular-curd.markdown b/angular-curd.markdown
@@ -1,8 +1,6 @@
 Angular  CURD
 -------------
-![Banner](https://cloud.githubusercontent.com/assets/2717960/25132241/8742b17a-2466-11e7-8768-3b6c72aa55c1.png)
 
-Angular 1.4x Tutorial: CRUD App with Angular 1.4x and localstorage.
 
 A [Pen](http://codepen.io/sumitridhal/pen/YVPQdW) by [sumitridhal](http://codepen.io/sumitridhal) on [CodePen](http://codepen.io/).
 

diff --git a/index.html b/index.html
@@ -1,4 +1,5 @@
-<div class="container" ng-app="App" ng-controller="ctrl">
+<div class="container" ng-app="App" ng-controller="ctrl"
+     style="position: absolute; left: 7%;">
 
   <section class="wrapper site-min-height">
     <!-- page start-->
@@ -17,7 +18,7 @@
             </div>
             <div class="col-xs-8">
               <div class="degree">
-                AngularJS CURD 
+                Angular 
               </div>
             </div>
           </div>
@@ -26,7 +27,7 @@
       <!-- header end -->
 
       <header class="panel-heading">
-        {{appHeadline}} 
+        {{appHeadline}}
       </header>
       <div class="panel-body">
         <div class="adv-table editable-table ">
@@ -107,4 +108,5 @@
     </section>
     <!-- page end-->
   </section>
-</div>
+</div>
+<div id="particles-js"></div>
diff --git a/scripts b/scripts
@@ -1,3 +1 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
diff --git a/style.css b/style.css
diff --git a/styles b/styles
@@ -1,2 +1 @@
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
diff --git a/angular-curd.markdown b/angular-curd.markdown
@@ -1,6 +1,6 @@
 Angular  CURD
 -------------
-![Alt text](/title.png)
+![Banner](https://cloud.githubusercontent.com/assets/2717960/25132241/8742b17a-2466-11e7-8768-3b6c72aa55c1.png)
 
 Angular 1.4x Tutorial: CRUD App with Angular 1.4x and localstorage.
 

diff --git a/angular-curd.markdown b/angular-curd.markdown
@@ -1,6 +1,8 @@
 Angular  CURD
 -------------
+![Alt text](/title.png)
 
+Angular 1.4x Tutorial: CRUD App with Angular 1.4x and localstorage.
 
 A [Pen](http://codepen.io/sumitridhal/pen/YVPQdW) by [sumitridhal](http://codepen.io/sumitridhal) on [CodePen](http://codepen.io/).
 

diff --git a/styles b/styles
@@ -1 +1,2 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
diff --git a/angular-curd.markdown b/angular-curd.markdown
@@ -0,0 +1,7 @@
+Angular  CURD
+-------------
+
+
+A [Pen](http://codepen.io/sumitridhal/pen/YVPQdW) by [sumitridhal](http://codepen.io/sumitridhal) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/sumitridhal/pen/YVPQdW/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<div class="container" ng-app="App" ng-controller="ctrl">
+
+  <section class="wrapper site-min-height">
+    <!-- page start-->
+    <section class="panel">
+
+      <!-- header -->
+      <div class="bg">
+        <div class="panel-body">
+          <div class="row">
+            <div class="col-xs-2">
+              <div class="panel-body text-center">
+                <div class="pro-thumb">
+                  <img src="https://angular.io/resources/images/logos/angular/angular.svg" alt="">
+                </div>
+              </div>
+            </div>
+            <div class="col-xs-8">
+              <div class="degree">
+                AngularJS CURD 
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- header end -->
+
+      <header class="panel-heading">
+        {{appHeadline}} 
+      </header>
+      <div class="panel-body">
+        <div class="adv-table editable-table ">
+          <div class="clearfix">
+            <div class="btn-group">
+              <button id="editable-sample_new" class="btn btn-success" ng-click="addToggle()">
+                                      Add New <i class="fa fa-plus"></i>
+                                  </button>
+            </div>
+            <div class="btn-group pull-right">
+              <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Tools <i class="fa fa-angle-down"></i>
+                                  </button>
+              <ul class="dropdown-menu pull-right">
+                <li><a href="#">Print</a></li>
+                <li><a href="#">Save as PDF</a></li>
+                <li><a href="#">Export to Excel</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="space15"></div>
+
+          <div class="table-responsive" tabindex="1" style="overflow: hidden; outline: none;">
+
+            <div id="editable-sample_wrapper" class="dataTables_wrapper form-inline" role="grid">
+              <div class="row">
+                <div class="col-lg-6">
+                  <div id="editable-sample_length" class="dataTables_length"><label>
+                    <select size="1" class="form-control xsmall" ng-options="option.name for option in data.availableOptions track by option.id"
+      ng-model="data.limit"></select> 
+                    records per page</label></div>
+                </div>
+                <div class="col-lg-6">
+                  <div class="dataTables_filter" id="editable-sample_filter"><label>Search: <input type="text" class="form-control medium" ng-model="search"></label></div>
+                </div>
+              </div>
+              <table class="table table-striped table-hover table-bordered dataTable" id="editable-sample" aria-describedby="editable-sample_info">
+                <thead>
+                  <tr role="row">
+                    <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="Username" style="width: 179px;">Username</th>
+                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Full Name: activate to sort column ascending" style="width: 263px;">Full Name</th>
+                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Points: activate to sort column ascending" style="width: 119px;">Points</th>
+                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Notes: activate to sort column ascending" style="width: 175px;">Notes</th>
+                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Edit: activate to sort column ascending" style="width: 85px;"></th>
+                  </tr>
+                </thead>
+                {{newval}}
+                <tbody role="alert" aria-live="polite" aria-relevant="all">
+                  <tr ng-show="addIf" add-list=""></tr>
+                  <tr ng-repeat="item in items| filter:search | limitTo: data.limit.value as filteredData track by $index " td-row="item" index="{{$index}}" filter-by="'search'">
+                  </tr>
+
+                </tbody>
+              </table>
+              <div class="row">
+                <div class="col-lg-6">
+                  <div class="dataTables_info" id="editable-sample_info">Showing 1 to {{ filteredData.length }} of {{listLength}} entries</div>
+                </div>
+                <div class="col-lg-6">
+                  <div class="dataTables_paginate paging_bootstrap pagination">
+                    <ul>
+                      <li ng-class="{disabled: currentPage == 0}">
+                        <a href ng-click="prevPage()">« Prev</a>
+                      </li>
+                      <li ng-repeat="n in range(filteredData.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
+                        <a href ng-bind="n + 1">1</a>
+                      </li>
+                      <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
+                        <a href ng-click="nextPage()">Next »</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- page end-->
+  </section>
+</div>
diff --git a/script.js b/script.js
@@ -0,0 +1,216 @@
+var app = angular.module('App', []);
+
+/**
+ * @name ctrl
+ * @desc ctrl Controller
+ **/
+
+app.controller('ctrl', function($scope, $filter) {
+
+  $scope.appHeadline = "Angular 1.4x CURD Application";
+
+  $scope.addIf = false;
+  //localStorage.clear();
+  $scope.saved = localStorage.getItem('items');
+  $scope.items = ($scope.saved !== null) ? JSON.parse($scope.saved) : [{
+    username: 'Jondi Rose',
+    fullname: 'Alfred Jond Rose',
+    point: 1234,
+    notes: 'super user'
+  }, {
+    username: 'Dulal',
+    fullname: 'Jonathan Smith',
+    point: 23,
+    notes: 'new user'
+  }];
+  localStorage.setItem('items', JSON.stringify($scope.items));
+
+  $scope.listLength = $scope.items.length;
+  $scope.data = {
+    availableOptions: [{
+      id: '1',
+      name: '5',
+      value: 5
+    }, {
+      id: '2',
+      name: '10',
+      value: 10
+    }, {
+      id: '3',
+      name: '15',
+      value: 15
+    }, {
+      id: '4',
+      name: 'All',
+      value: $scope.listLength
+    }],
+    limit: {
+      id: '1',
+      name: '5',
+      value: 5
+    } //This sets the default value of the select in the ui
+  };
+
+  //$scope.sortingOrder = sortingOrder;
+  $scope.reverse = false;
+  $scope.filteredItems = [];
+  $scope.groupedItems = [];
+  $scope.itemsPerPage = $scope.data.limit;
+  $scope.pagedItems = [];
+  $scope.currentPage = 0;
+
+  /* $scope.$watch("[search , data.limit]", function(query) {
+    // $scope.filteredData = $filter("filter")($scope.items, query[0]);
+     //$scope.limitedData = $filter('limitTo')($scope.filteredData, query[1].value, 0);
+   });*/
+
+  /* $scope.groupToPages = function () {
+        $scope.pagedItems = [];
+        
+        for (var i = 0; i < $scope.filteredData.length; i++) {
+            if (i % $scope.itemsPerPage === 0) {
+                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredData[i] ];
+            } else {
+                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredData[i]);
+            }
+        }
+    };*/
+
+  $scope.range = function(start, end) {
+    var ret = [];
+    if (!end) {
+      end = start;
+      start = 0;
+    }
+    if (end < $scope.data.limit.value) {
+      end = 1;
+    } else {
+      end = Math.ceil(end / $scope.data.limit.value)
+    }
+    for (var i = start; i < end; i++) {
+      ret.push(i);
+    }
+    return ret;
+  };
+
+  $scope.prevPage = function() {
+    if ($scope.currentPage > 0) {
+      $scope.currentPage--;
+    }
+  };
+
+  $scope.nextPage = function() {
+    if ($scope.currentPage < $scope.pagedItems.length - 1) {
+      $scope.currentPage++;
+    }
+  };
+
+  $scope.setPage = function() {
+    $scope.currentPage = this.n;
+  };
+
+  $scope.addToggle = function() {
+    $scope.addIf = !($scope.addIf);
+  };
+
+  $scope.$on('addItem', function(event, data) {
+    $scope.items.push(data);
+    localStorage.setItem('items', JSON.stringify($scope.items));
+
+    $scope.addIf = !($scope.addIf);
+  });
+
+  $scope.$on('update', function(event, data, index) {
+    angular.copy(data, $scope.items[index]);
+    localStorage.setItem('items', JSON.stringify($scope.items));
+  });
+
+  $scope.$on('deleteItem', function(event, index) {
+    $scope.items.splice(index, 1);
+    localStorage.setItem('items', JSON.stringify($scope.items));
+  });
+
+  $scope.$on('cancel', function(event) {
+    $scope.addIf = !($scope.addIf);
+  });
+
+});
+
+/**
+ * @name addList
+ * @desc <add-list> Directive
+ */
+function addList() {
+  return {
+    scope: {
+      item: '=addList',
+      addIf: '=',
+      addItem: '&',
+      cancel: '&'
+    },
+    restrict: 'EA',
+    template: '<td class="sorting_1"><input type="text" class="form-control small" ng-model="newval.username" value=""></td><td class=""><input type="text" class="form-control small" value="" ng-model="newval.fullname"></td><td class=""><input type="text" class="form-control small" value="" ng-model="newval.point"></td><td class=""><input type="text" class="form-control small" value="" ng-model="newval.notes"></td><td class=""><button class="btn btn-success btn-xs edit" ng-click="addItem(newval)"><i class="fa fa-user-plus"></i></button><button class="btn btn-danger btn-xs cancel" ng-click="cancel()"><i class="fa fa-times"></i></button></td>',
+    transclude: true,
+    controller: function($scope, $element, $transclude) {
+      $scope.addItem = function(data) {
+        $scope.$emit('addItem', data);
+        $scope.newval = {}; //clear the input after adding
+      };
+
+      $scope.cancel = function() {
+        $scope.$emit('cancel');
+        $scope.newval = {}; //clear the input on cancel
+      }
+    }
+  };
+}
+
+app.directive('addList', addList);
+
+/**
+ * @name tdRow
+ * @desc <td-row> Directive
+ */
+function tdRow() {
+
+  var link = function($scope, $element, $attrs) {};
+
+  var controller = function($scope, $element, $transclude) {
+    $scope.edit = false;
+
+    $scope.editItem = function(oldData) {
+      $scope.edit = angular.copy(oldData);
+      $scope.mode = "edit";
+    }
+
+    $scope.deleteItem = function(index) {
+      $scope.$emit('deleteItem', index);
+    }
+
+    $scope.cancelUpdateItem = function(index) {
+      $scope.mode = "default";
+    }
+
+    $scope.updateItem = function(data, index) {
+      $scope.$emit('update', data, index);
+      $scope.mode = "default";
+    }
+  }
+
+  return {
+    scope: {
+      item: '=tdRow',
+      index: '@',
+      editItem: '&',
+      updateItem: '&',
+      deleteItem: '&',
+      filterBy: '='
+    },
+    restrict: 'EA',
+    template: '<td class="sorting_1" ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.username"><span ng-switch-default id="item.username">{{item.username}}</span></td><td ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.fullname"><span ng-switch-default id="item.fullname">{{item.fullname}}</span></td><td ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.point"><span ng-switch-default id="item.point">{{item.point}}</span></td><td ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.notes"><span ng-switch-default id="item.notes">{{item.notes}}</span></td><td ng-switch="mode"><button class="btn btn-success btn-xs edit" ng-switch-when="edit" ng-click="updateItem(edit, index)"><i class="fa fa-floppy-o"></i></button><button class="btn btn-success btn-xs" ng-switch-default ng-click="editItem(item)"><i class="fa fa-pencil-square-o "></i></button><button class="btn btn-danger btn-xs edit" ng-switch-when="edit" ng-click="cancelUpdateItem(index)"><i class="fa fa-times"></i></button><button class="btn btn-danger btn-xs" ng-switch-default class="edit" ng-click="deleteItem(index)"><i class="fa fa-trash-o"></i></button></td>',
+    transclude: true,
+    controller: controller,
+  }
+}
+
+app.directive('tdRow', tdRow);
diff --git a/scripts b/scripts
@@ -0,0 +1,3 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
diff --git a/style.css b/style.css
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />