如何在angularjs中更新数组列表对象

时间:2018-12-27 10:25:16

标签: angularjs

我是AngularJS的学习者,我试图更新我的表列表用户,使其能够编辑用户信息,并能编辑下面的代码使用的表列表对象,但是在保存编辑用户信息时出现异常。

employee_list.html

<?php $numrows = count( get_sub_field( 'agence_post' ) );
  echo $numrows;?>

EmployeeListController

<div ng-repeat="employee in employeeList | filter:{name:searchName}">
    <div class="panel panel-primary" ng-class="{'panel-success':employee.id==selectedId}">
        <div class="panel-heading">
            <h3 class="panel-title">{{employee.name}}</h3>
        </div>
        <div class="panel-body">

            <div class="row">

                <div class="col-xs-12">

                    <div class="row" class="vertical-align">

                        <div class="col-xs-2">
                            <img ng-src="{{employee.photoPath}}">
                        </div>

                        <div class="col-xs-10">
                            <div class="row">
                                <div class="col-xs-2">
                                    Gender
                                </div>
                                <div class="col-xs-10">
                                    {{employee.gender}}
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-2">
                                    DateOfBirth
                                </div>
                                <div class="col-xs-10">
                                    {{employee.dateOfBirth | date}}
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-2">
                                    PhoneNumber
                                </div>
                                <div class="col-xs-10">
                                    {{employee.phoneNumber}}
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-2">
                                    ContactPreference
                                </div>
                                <div class="col-xs-10">
                                    {{employee.contactPreference}}
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-2">
                                    Email
                                </div>
                                <div class="col-xs-10">
                                    {{employee.email}}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" ng-click="viewEmployee(employee.id)">View</button>
            <button class="btn btn-primary" ng-click="editEmployee(employee.id)">Edit</button>
            <span ng-if="confirmDelete">
                <span>Are you sure want to Delete?</span>
                <button class="btn btn-danger" ng-click="deleteEmployee(employee.id)">Yes</button>
                <button class="btn btn-primary" ng-click="confirmDelete=false">No</button>
            </span>
            <button class="btn btn-danger" ng-click="deleteConfirmation(employee.id)" ng-if="!confirmDelete">Delete</button>
        </div>
        {{confirmDelete}}
    </div>
</div>

EmployeeCreateCtrl

 $scope.employeeList = employeeService.getListOfEmployees();

employeeService:

  /**
     * saveData
     */
    $scope.saveData = function (employee) {
        //Edit employee Information
        if ($stateParams.employeeId != 0) {
            var employee = employeeService.getEmployeeById($stateParams.employeeId);
            employeeService.updateEmployee($stateParams.employeeId,employee);
        } else {
            employee.id = employeeService.getListOfEmployees().length + 1;
            employeeService.addNewEmployee(employee);
        }
        $state.go('employeeList');
    }

[ngRepeat:dupes] http://errors.angularjs.org/1.7.5/ngRepeat/dupes?p0=employee%20in%20employeeList%20%7C%20filter%3A%7Bname%3AsearchName%7D&p1=object%3A12&p2=%7B%22id%22%3A1%2C%22name%22%3A%22Hales%22%2C%22gender%22%3A%22male%22%2C%22email%22%3A%22Ram%40gmail.com%22%2C%22phoneNumber%22%3A%228008824731%22%2C%22contactPreference%22%3A%22email%22%2C%22dateOfBirth%22%3A%221991-10-11T18%3A30%3A00.000Z%22%2C%22department%22%3A%221%22%2C%22isActive%22%3Atrue%2C%22photoPath%22%3A%22assets%2Fimgs%2Fimage1.jpg%22%2C%22%24%24hashKey%22%3A%22object%3A12%22%7D

1 个答案:

答案 0 :(得分:0)

当要传递给“ ng-repeat”指令的数组中有重复对象时,AngularJS会引发上述异常。因此,您需要使用track by,如下所示。您可以在模型数组对象中使用track by $index或其他任何属性(例如track by employee.idtrack by employee.email),这是唯一的。
试试下面的示例

<div ng-repeat="employee in employeeList | filter:{name:searchName} track by $index ">