Angularjs edit and update and add another data

Question

Im working on functionality where I add Worklist and I can edit or delete the same worklist added in local storage.

Im facing issue after I edit worklist I cannot add more it gets updated in same worklist data selected for edit. (it should also get updated in localstorage the same edited data)

My 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/

can anyone help me with this? I cannot save new data after I edit particular data it goes with in the same data I edited and keep on updated instead adding new. — Vicky Parab
– Vicky Parab, Commented Oct 28, 2017 at 11:25
Sorry, I'm not familiar with angularjs, I just edited the tags and removed "angular" tag, which refers to angular 2-> which I am familiar with. But this is an angularjs question :) — AVJT82
– AVJT82, Commented Oct 28, 2017 at 11:36

AddWeb Solution Pvt Ltd · Accepted Answer · 2017-10-28 12:16:02Z

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(){
            $('.isRequired').each(function(i, obj) {
                if($(this).val() == ""){
                    $(this).addClass("errorinput");
                }
                else{ $(this).removeClass("errorinput"); }
            });
            // This is extra check I have put   
            if($scope.id == undefined || $scope.id == '-1') {
               var index = '-1';
            } else {            
              var index = getSelectedIndex($scope.id);
              $scope.id = '-1';
            }


            if(index == "-1"){

                //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{
                                console.log('in else', index);
                //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; 
        };

    }]);

})();

I have updated your code.

Thanx for your solution AddWeb can you explain me what was the issue and how you solved it? I really need to know what was wrong I been scratching since yesterday.
I am glad it has worked for you. You just simple console the values of $scope.id and index in your add() function. Please approve this answer if it has worked for you. Upvote would also be appreciable.

Collectives™ on Stack Overflow

Angularjs edit and update and add another data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related