Angularjs編輯和更新並添加另一個數據

Question

我正在處理添加Worklist的功能，並且我可以編輯或刪除本地存儲中添加的同一個工作列表。

編輯工作表後，我面臨的問題我無法添加更多，它被選中進行編輯相同的工作列表數據更新。 （也應該得到的localStorage同一編輯的數據更新）

我的小提琴：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 /腳本：

(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 CODE /腳本：

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

    }]); 

})(); 

我已經更新了你的代碼。