Working on a feature where Worklists can be added and edited or deleted from local storage.
Encountering an issue where after editing a worklist, it cannot be added anymore as it updates the existing worklist data that was selected for editing. (the edited data should also reflect in the local storage)
Check out the Fiddle: https://jsfiddle.net/3gosnxny/3/
Html:
<div ng-app="sandbox">
<div>
<div ng-controller="workController">
<form name="commentForm" method="post">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="workOne">Work One</label>
<input class="form-control isRequired" type="text" id="workOne" name="skillsMain" ng-model="workOne" placeholder="Enter Work">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 pull-right">
<button class="btn btn-default" type="submit" value="Add" ng-click="add()">SAVE</button>
</div>
</form>
<div class="clearfix"></div>
<div class="content_area">
<h4>WorkList</h4>
<hr/>
<ul class="ItemSkills">
<li ng-repeat="items in workList">
<span class="hidden-xs hidden-sm hidden-md hidden-lg">{{items.id = $index}}</span>
<h4>{{items.workOne}}</h4>
<div class="btn_main">
<div class="btn" ng-click="selectEdit(items.id)">Edit</div> |
<div class="btn" ng-click="del(items.id)">Delete</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
CSS:
.ItemSkills h4 {
display: inline - block;
}
.btn_main {
display: inline - block;
}
ANGULAR CODE / Script:
(function() {
'use strict';
var App = angular.module('sandbox', ['LocalStorageModule']);
App.value('workList', []);
// Skills List
App.controller('workController', ['$scope', 'localStorageService', 'workList', function($scope, localStorageService, workList) {
// <!-- Populate table with products data -->
$scope.workList = workList;
$scope.storage = localStorageService;
// <!-- Delete function -->
$scope.del = function(id) {
var result = confirm('Are you sure?');
if (result === true) {
var index = getSelectedIndex(id);
$scope.workList.splice(index, 1);
};
};
// <!-- Select the row of data and update the form function -->
$scope.selectEdit = function(id) {
var index = getSelectedIndex(id);
var product = $scope.workList[index];
$scope.id = product.id;
$scope.workOne = product.workOne;
};
// <!-- Add a new product function -->
$scope.add = function(id) {
console.log($scope.storage);
$('.isRequired').each(function(i, obj) {
if ($(this).val() == "") {
$(this).addClass("errorinput");
} else {
$(this).removeClass("errorinput");
}
});
var index = getSelectedIndex($scope.id);
if (!index == "") {
//If index is not available do Save
if (!$scope.workOne == "") {
$scope.workList.push({
workOne: $scope.workOne
});
// Save Data to storage
$scope.storage.workStore = $scope.workList;
// <!-- Resets the form -->
$scope.workOne = '';
}
} else {
//If index is available do Edit
$scope.workList[index].workOne = $scope.workOne;
// <!-- Resets the form -->
$scope.workOne = '';
}
};
// <!-- Function finds unique product data based on its id -->
function getSelectedIndex(id) {
for (var i = 0; i < $scope.workList.length; i++)
if ($scope.workList[i].id == id)
return i;
return -1;
};
}]);
})();
Live JsFiddle: https://jsfiddle.net/3gosnxny/3/