AngularJS 편집 레코드 작동이 작동하지 않습니다.

Question

내 페이지에는 배열에 개체를 추가하는 형식이 있습니다. 배열 항목을 편집 할 수있는 링크가있는 페이지에 배열이 표시됩니다.

항목을 추가 할 때 삭제 된 배열 색인이 변경된 경우 나중에 해당 항목을 편집 할 수 있도록 기본 키를 첨부합니다.

추가 기능이 작동하지만 편집 동작이 아닙니다. 양식 컨트롤이 바인딩 된 ng 모델을 업데이트하면 양식을 편집 할 레코드가 표시되지 않습니다. 그것은 $ 범위 문제 일지 모르지만 나는 이것을 달성하기 위해 특별히 부모 $ scope에서 모델을 선언했습니다. http://plnkr.co/edit/yDlPpFunxFLHPiI0kCdj?p=preview

<form ng-controller="formCtrl" novalidate ng-submit="submit()"> 
    <input type="text" name="name" ng-model="student.name" placeholder="name"> 
    <input type="number" name="age" ng-model="student.age" placeholder="age"> 
    <input type="hidden" ng-value="pk"> 
    <input type="submit"> 
</form> 

<h1>students</h1> 
<ul> 
    <li ng-repeat="item in students"><a href="#" ng-click="editStudent(item.pk)">{{item.name}}</a> - {{item.age}}</li> 
</ul> 

var myApp = angular.module('myApp',[]); 

myApp.controller("myCtrl", ['$scope', function($scope){ 

    $scope.student = {}; 
    $scope.pk = 1; 
    $scope.index = 0; 
    $scope.students = []; 

    $scope.editStudent = function (id) { 


     for (var i = 0; i < $scope.students.length; i++) { 
      console.log("comparing "+$scope.students[i].pk+ " & " + id); 
      if ($scope.students[i].pk == id) { 
       console.log("editing pk nr.: "+ id); 
       $scope.student = { 
        name: $scope.students[i].name, 
        age: $scope.students[i].age 
       }; 
       $scope.index = id; 
      } 
     } 


    }; 


}]); 



myApp.controller("formCtrl", ['$scope', function($scope) { 

    $scope.submit = function() { 

     if ($scope.index === 0) { 
      $scope.students.push({ 
       name: $scope.student.name, 
       age: $scope.student.age, 
       pk: $scope.pk 
      }); 

      $scope.pk++; 
      $scope.student = {}; 
     } else { 
      for (var i = 0; i < $scope.students.length; i++) { 
       if ($scope.students[i].pk == $scope.index) { 
        $scope.students[i] = { 
         name: $scope.student.name, 
         age: $scope.student.age, 
         pk: $scope.index 
        }; 
       } 
      } 

      $scope.index = 0; 
     } 
    }; 


}]); 

감사

Answer 1

내가 변경 here를 참조하십시오 plunkr을 편집 한 다음은

는 plunker이다. 내가 만든

변화는 있었다 :

• 형태 컨트롤러 앱에서 2 컨트롤러에 대한 필요성을 제거.
• ng-repeat을 사용하여 클릭 한 항목을 편집 할 때 사용할 수있는 $index 속성을 사용했습니다. 여기

은 당신의 HTML :

<div ng-app="myApp" ng-controller="myCtrl as ct"> 

    <form novalidate> 
     <input type="text" name="name" ng-model="newStudent.name" placeholder="name"> 
     <input type="number" name="age" ng-model="newStudent.age" placeholder="age"> 
     <input type="hidden" ng-value="pk"> 
     <input type="button" value="submit" ng-click="submit()"> 
    </form> 

    <h1>students</h1> 
    <ul> 
     <li ng-repeat="item in students"><a href="#" ng-click="editStudent($index)">{{item.name}}</a> - {{item.age}}</li> 
    </ul> 
    </div> 

그리고 당신의 JavaScript 파일 :

이

var myApp = angular.module('myApp',[]); 

myApp.controller("myCtrl", ['$scope', function($scope){ 

    $scope.newStudent = {}; 
    $scope.students = []; 

    $scope.index = -1; 

    $scope.editStudent = function (index) { 
     console.log('Editing student: ' + $scope.students[index].name); 
     $scope.index = index; 
     $scope.newStudent = angular.copy($scope.students[index]); 
    }; 


    $scope.submit = function() { 
     if ($scope.index < 0) { 
     $scope.students.push($scope.newStudent); 
     } else { 
     $scope.students[$scope.index] = $scope.newStudent; 
     } 

     $scope.newStudent = { 
     name: '', 
     age: '' 
     } 

     $scope.index = -1; 
    }; 

}]); 

편집 : 난 그냥 학생을 편집 할 때의 코드를 수정 , 그래서 angular.copy를 사용하는 편집 할 때 $scope.students 배열에 대한 바인딩이 끊어지고 변경 사항은 제출 버튼을 클릭하면 적용됩니다.