Как обновить объект списка массивов в angularjs

Question

Я учусь в AngularJS, и я пытаюсь обновить мой список таблиц. Пользователь может редактировать информацию о пользователе, а для редактирования объекта списка таблиц я использовал приведенный ниже код, но получаю исключение при сохранении редактирования информации о пользователе.

employee_list.html

<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>

EmployeeListController

 $scope.employeeList = employeeService.getListOfEmployees();

EmployeeCreateCtrl

  /**
     * 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');
    }

employeeService:

routerApp.service("employeeService", function ($filter) {

    var employees = [
        {
            id: 1,
            name: 'Hales',
            gender: 'male',
            email: 'Ram@gmail.com',
            phoneNumber: '8008824731',
            contactPreference: 'email',
            dateOfBirth: new Date('10/12/1991'),
            department: '1',
            isActive: true,
            photoPath: 'assets/imgs/image1.jpg',
        },
        {
            id: 2,
            name: 'Jordan',
            gender: 'male',
            email: 'Rahul@gmail.com',
            phoneNumber: '8008824732',
            contactPreference: 'phone',
            dateOfBirth: new Date('2/9/2002'),
            department: '3',
            isActive: true,
            photoPath: 'assets/imgs/image2.jpg',
        },
        {
            id: 3,
            name: 'Marry',
            gender: 'female',
            email: 'Rakesh@gmail.com',
            phoneNumber: '8008824733',
            contactPreference: 'email',
            dateOfBirth: new Date('04/03/1989'),
            department: '2',
            isActive: true,
            photoPath: 'assets/imgs/image3.jpg',
        }
    ]

    this.addNewEmployee = function(employee){
        employees.push(employee);
    }

    this.getEmployeeById = function (employeeId) {
        return $filter('filter')(employees, { id: employeeId })[0];
    }

    this.updateEmployee = function (employeeId,currentUser) {
        employees[employeeId] = currentUser;
    }

});

[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

Answer 1

AngularJS выдает вышеупомянутое исключение, когда у вас есть дубликаты объектов в массиве, которые вы передаете директиве "ng-repeat".Так что вам нужно использовать track by, как показано ниже.Вы можете использовать track by $index или любое другое свойство (например, track by employee.id или track by employee.email) в объекте массива модели, который является уникальным.
Попробуйте приведенный ниже пример

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