AngularJS编辑记录行为不起作用

AngularJS edit record behaviour not working

本文关键字：不起作用 记录 编辑 AngularJS      更新时间：2023-09-26

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

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

添加功能有效，但编辑行为不起作用。当我更新表单控件绑定到的 ng 模型时，表单不显示要编辑的记录。这可能是一个$scope问题，但我在父$scope中声明了模型，专门用于实现这一目标。

这是一个 plunker：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;
        }
    };

}]);

谢谢

我已经编辑了你的 plunkr，请在此处查看更改。

我所做的更改是：

  • 删除了表单控制器，您的应用程序中不需要 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数组的绑定，并且仅当您单击提交按钮时才会应用更改。

相关文章：