javascript - Angularjs 编辑和更新并添加其他数据

Question

我正在开发添加工作列表的功能，并且我可以编辑或删除在本地存储中添加的相同工作列表。

编辑工作列表后遇到问题，我无法添加更多内容，它会在选择编辑的相同工作列表数据中更新。 (它也应该在本地存储中更新相同的编辑数据)

我的 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 代码/脚本:

    (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;
        };

    }]);

})();

实时 JsFiddle:https://jsfiddle.net/3gosnxny/3/

Answer 1

Angular 代码/脚本:

(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; 
        };

    }]);

})();

我已经更新了您的代码。