AngularJS 编辑记录行为不起作用

Question

我的页面有一个用于将对象添加到数组的表单。数组显示在页面上，带有用于编辑数组项的链接。

当我添加项目时，我附加了一个主键以便以后能够编辑该项目，以防它被删除并且它的数组索引被更改。

添加功能有效，但编辑行为无效。当我更新表单控件绑定到的 ng-model 时，表单不显示要编辑的记录。这可能是一个 $scope 问题，但我在父 $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

我已经编辑了你的plunkr, see the changes here。

我所做的更改是：

删除了表单控制器，您的应用中不再需要 2 个控制器。
使用 $index 属性在使用 ng-repeat 编辑您单击的项目时可用。

这是你的 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 数组的绑定，只有当你点击提交时才会应用更改按钮。

AngularJS 编辑记录行为不起作用

AngularJS edit record behaviour not working

javascript

angularjs

angular-ngmodel