javascript - 使用 angularjs 从表中编辑和保存时出现 CRUD 问题

Question

当我尝试单击编辑单选按钮时，详细信息将显示在相关框中，但表中的现有详细信息将被删除。这里我的要求是使用单个数组/范围变量进行编辑、显示和删除。但是在编辑/删除时没有使用 for 循环。我在这里做了更改，但没有正确的工作方式。我的html index.html如下

<div ng-controller="employeeController">
    <header><h1>Employee Details</h1></header>

    <form name="myForm" novalidate>
        <table id="myTable" cellspacing="0" cellpadding="4">
            <tr>
                <td><label> Employee Id </Label></td>
                <td><input type="text" name="eid" data-ng-model="employees.EmployeeId" data-ng-required="true" ng-disabled="newEmployees"/></td>
            </tr>
            <tr>
                <td><label> FirstName </Label></td>
                <td><input type="text" name="fname" data-ng-model="employees.FirstName" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><label> LastName </Label></td>
                <td><input type="text" name="lname" data-ng-model="employees.LastName" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><label> Gender </Label></td>
                <td>
                    <input type="radio" name="gender" data-ng-change="employees.Gender" value ="Male" data-ng-model="employees.Gender"/> Male
                    <input type="radio" name="gender" data-ng-change="employees.Gender" value ="Female" data-ng-model="employees.Gender"/>Female
                </td>
            </tr>
            <tr>
                <td><label> Email </Label></td>
                <td><input type="text" name="email" data-ng-model="employees.Email" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><label> Account </Label></td>
                <td><input type="text" name="account" data-ng-model="employees.Account" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><input type="hidden" data-ng-model="employees.EmployeeId"></td>
            </tr>
        </table>
        <button name="btnSave" data-ng-click="saveEmployeeRecord(employees)" class="userbutton">Save</button>
        <button name="btnReset" data-ng-click="resetEmployeeRecord()" class="userbutton">Reset</button>
    </form> 

    <table border="2" cellspacing="0" cellpadding="4">
        <tr style="color: blue">
            <th style="width:100px">Employee Id</th>
            <th style="width:150px">FirstName</th>
            <th style="width:150px">LastName</th>
            <th style="width:90px">Gender</th>
            <th style="width:150px">Email</th>
            <th style="width:60px">Account</th>
            <th>Action</th>
        </tr>
       <tr style="color:green" data-ng-repeat="emp in employees">
           <td>{{emp.EmployeeId}}</td>
           <td>{{emp.FirstName}}</td>
           <td>{{emp.LastName}}</td>
           <td>{{emp.Gender}}</td>
           <td>{{emp.Email}}</td>
           <td>{{emp.Account}}</td>
           <td>
               <input type="radio" name="process" data-ng-click="editEmployee(emp, employees.indexOf(emp))"> Edit
               <input type="radio" name="process" data-ng-click="DeleteEmployee(employees.indexOf(emp))"> Delete
           </td>
       </tr>
   </table>
</div>

javascript 应用程序.js

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

employeeApp.controller("employeeController", function($rootScope, $scope, $http) {

            $http.get('data/employees.json').success(function(data) {

                $rootScope.employees = data;
            }); 

            var empId = 12342;
            $rootScope.saveEmployeeRecord = function(emp) {
                if($rootScope.employees.EmployeeId == null) {
                    $rootScope.employees.EmployeeId = empId++;
                    $rootScope.employees.push(emp);
                }
                else {
                    for(i in $rootScope.employees) {
                        if($rootScope.employees[i].EmployeeId == emp.EmployeeId) { 
                            $rootScope.employees[i]= emp;
                        }
                    }
                }

                //$rootScope.employees = {};
            }

            $rootScope.resetEmployeeRecord = function() {
                angular.copy({}, $rootScope.employees);
            }

            $rootScope.editEmployee = function(emp, indx) {

                    //$rootScope.emp = $rootScope.employees;
                    if($rootScope.employees[indx].EmployeeId == emp.EmployeeId) { 
                        $rootScope.employees = angular.copy($rootScope.employees[indx]);
                    }


            }

            $rootScope.DeleteEmployee = function(idx) {

                var result = confirm("Are you sure want to delete?");
                if (result) {
                    $rootScope.employees.splice(idx,1);
                    return true;
                }
                else {
                     return false;
                }

                //for(i in $rootScope.employees) {
                    //if($rootScope.employees[i].EmployeeId == idx) { 

                        //$rootScope.employees = {};
                    //}
                //}
            }

});

employees.json 文件:

[
            {
                "EmployeeId": "61234",
                "LastName": "Anderson",
                "FirstName": "James",
                "Gender": "Male",
                "Email": "james_anderson@infosys.com",
                "Account": "Boeing"
            },
            {
                "EmployeeId": "512458",
                "LastName": "Cambell",
                "FirstName": "Mike",
                "Gender": "Male",
                "Email": "mike.cambell@infosys.com",
                "Account": "Boeing"
            },
            {
                "EmployeeId": "712785",
                "LastName": "Swachengar",
                "FirstName": "Andrew",
                "Gender": "Male",
                "Email": "andrew.swachengar@infosys.com",
                "Account": "Cisco"
            },
            {
                "EmployeeId": "712734",
                "LastName": "Anderson",
                "FirstName": "James",
                "Gender": "Male",
                "Email": "james.anderson@infosys.com",
                "Account": "Apple"
            },
            {
                "EmployeeId": "61245",
                "LastName": "Green",
                "FirstName": "Rachael",
                "Gender": "Female",
                "Email": "rachael_green@infosys.com",
                "Account": "Boeing"
            },
            {
                "EmployeeId": "61347",
                "LastName": "Brown",
                "FirstName": "Jackualine",
                "Gender": "Female",
                "Email": "jackualine_brown@infosys.com",
                "Account": "Boeing"
            }
] 

Answer 1

您需要将所选项目分配给您必须在编辑/保存表单中关联的模型。然后单击“保存”时，您需要使用更新后的数据更新原始数据。这是一个如何工作的例子:

        $rootScope.saveEmployeeRecord = function() {
            for(k in $scope.selectedEmployee){
             $scope.selectedEmployee[k] = $scope.selectedEmployeeCopy[k];
            }
        }

        $rootScope.resetEmployeeRecord = function() {
            $rootScope.selectedEmployeeCopy = null;
        }


        $rootScope.editEmployee = function(emp) {
            $rootScope.selectedEmployee = emp;
            $rootScope.selectedEmployeeCopy = angular.copy($rootScope.selectedEmployee);
        }

在这里，我正在制作您的原始员工的副本，并更新副本。保存后，副本将替换原始员工。取消后，它将被简单地忽略。这是一个 working fiddle基于您的代码。

编辑:根据反馈，更新了未按预期工作的保存和删除方法。还更新了 jsFiddle。Edit2: 删除了循环并与传递的数组索引一起重新定位

    $rootScope.saveEmployeeRecord = function() {
            $rootScope.employees.splice($rootScope.selectedIndex, 1,$rootScope.selectedEmployeeCopy);
        }

        $rootScope.resetEmployeeRecord = function() {
            $rootScope.selectedEmployeeCopy = null;
            $rootScope.selectedIndex = null;
        }

        $rootScope.editEmployee = function(emp, ind) {
            $rootScope.selectedIndex = ind;
            $rootScope.selectedEmployee = emp;
            $rootScope.selectedEmployeeCopy = angular.copy($rootScope.selectedEmployee);
        }

        $rootScope.DeleteEmployee = function(emp, ind) {

            var result = confirm("Are you sure want to delete?");
            if (result) {                    
                $rootScope.employees.splice(ind, 1);
                $rootScope.selectedEmployeeCopy = null;
                $rootScope.selectedIndex = null;
                return true;
            }
            else {
                 return false;
            }
        }