AngularJS добавляет новый элемент и удаляет существующий элемент из списка

Question

(1) Я пытаюсь добавить нового пользователя в список элементов (userList). Функциональность работает, но есть проблема. Я сделал список «selectable» aka .. когда пользователь нажимает на элемент в списке, текстовые поля в моем коде html5 заполняются w/values ​​из выбранного элемента в списке. Это позволяет пользователю редактировать отдельные свойства из элемента. Прямо под группой текстовых полей находится кнопка «добавить нового пользователя» ..... Когда приложение запускается, текстовые поля пустые, и я заполняю их соответствующим текстом и нажимаю кнопку «Добавить», а новый пользователь добавляется к список. Однако проблемы состоят в том, что когда я уже выбрал элемент, отредактировал его ... тогда текстовые поля по-прежнему заполняются w/значениями элементов ... теперь, если я нажму кнопку добавить нового пользователя ... добавлен новый пользователь ... но теперь у меня есть дубликаты пользователей в моем списке .. это нормально, потому что я всегда могу отредактировать один из них ... Однако ... похоже, что и новый, и старый пользователь теперь каким-то образом связаны ... если я редактирую один из них, значения в другом тоже меняются ... (Надеюсь, это имеет смысл). Я чувствую, что, поскольку новый пользователь был создан с помощью выбранной записи старого пользователя, как-то связаны их индексы .... не может показаться, как создать нового пользователя, не имея старого пользователя, подключенного к нему.

(2) Удаление пользователя отлично работает, но кроме того, пользователь удаляется всегда из нижней части списка. Я хочу иметь возможность выбрать любой элемент в списке и удалить этот конкретный элемент. Я попытался использовать что-то вроде: -

$scope.userList.splice($scope.userList.indexOf(currentUser), 1); 

, но безрезультатно.

Мои Javascript: -

<script type="text/javascript"> 
    function UserController($scope) { 
     $scope.userList = [ 
      { Name: "John Doe1", Title: "xxxx", Company: "yyyy", Place: "zzzz" }, 
      { Name: "John Doe2", Title: "xxxx", Company: "yyyy", Place: "zzzz" }, 
      { Name: "John Doe3", Title: "xxxx", Company: "yyyy", Place: "zzzz" }, 
      { Name: "John Doe4", Title: "xxxx", Company: "yyyy", Place: "zzzz" } 
     ]; 


     $scope.selectUser = function (user) { 
      $scope.currentUser = user; 
     } 

     $scope.addNew = function (currentUser) { 
      $scope.userList.push(currentUser); 
      $scope.currentUser = {}; //clear out Employee object 
     } 

     $scope.removeItem = function (currentUser) { 
      // $scope.userList.pop(currentUser); 
      $scope.userList.splice($scope.userList.indexOf(currentUser), 1); 
      $scope.currentUser = {}; //clear out Employee object 
     } 
    } 
</script> 

Мой HTML: -

<div class="row"> 
     <div style="margin-top: 40px"></div> 
     <div data-ng-app="" data-ng-controller="UserController"> 
      <b>Employee List</b><br /> 
      <br /> 
      <ul> 
       <li data-ng-repeat="user in userList"> 

        <a data-ng-click="selectUser(user)">{{user.Name}} | {{user.Title}} | {{user.Company}} | {{user.Place}}. </a> 

       </li> 
      </ul> 
      <hr> 
      <div style="margin-top: 40px"></div> 
      <b>Selected Employee</b><br /> 
      <br /> 
      <div style="border:dotted 1px grey; padding:20px 0 20px 0; width:40%;"> 
      <div class="row" style="margin-left: 30px"> 
       <div style="display: inline-block;"> 
        Name: 
       </div> 
       <div style="display: inline-block; margin-left: 35px;"> 
        <input type="text" data-ng-model="currentUser.Name"> 
       </div> 
      </div> 
      <div style="margin-top: 20px"></div> 
      <div class="row" style="margin-left: 30px"> 
       <div style="display: inline-block;"> 
        Title: 
       </div> 
       <div style="display: inline-block; margin-left: 45px;"> 
        <input type="text" data-ng-model="currentUser.Title"> 
       </div> 
      </div> 
      <div style="margin-top: 20px"></div> 
      <div class="row" style="margin-left: 30px"> 
       <div style="display: inline-block;"> 
        Company: 
       </div> 
       <div style="display: inline-block; margin-left: 10px;"> 
        <input type="text" data-ng-model="currentUser.Company"> 
       </div> 
      </div> 
      <div style="margin-top: 20px"></div> 
      <div class="row" style="margin-left: 30px"> 
       <div style="display: inline-block;"> 
        Place: 
       </div> 
       <div style="display: inline-block; margin-left: 35px;"> 
        <input type="text" data-ng-model="currentUser.Place"> 
       </div> 
      </div> 
      </div> 
      <div> 
       <div style="margin: 2% 0 0 8%; display:inline-block"> 
        <button data-ng-click="addNew(currentUser)" class="btn btn-primary" type="button">Add New Employee</button> 
       </div> 
       <div style="margin: 2% 0 0 1%; display:inline-block"> 
        <button data-ng-click="removeItem(currentUser)" class="btn btn-primary" type="button">Delete Employee</button> 
       </div> 
      </div> 
      <hr> 
      <div style="margin-top: 40px"></div> 
      <b>Employee Details:</b><br /> 
      <br /> 
      {{currentUser.Name}} is a {{currentUser.Title}} at {{currentUser.Company}}. He currently lives in {{currentUser.Place}}. 
     </div> 
    </div> 

* EDIT * Я решил стереть вопрос пользователя, как: -

$scope.removeItem = function (currentUser) { 
       if ($scope.userList.indexOf(currentUser) >= 0) { 
        $scope.userList.splice($scope.userList.indexOf(currentUser), 1); 
        $scope.currentUser = {}; //clear out Employee object 
       } 
      } 

и благодаря предложение, добавление новой проблемы пользователя также было разрешено.

Answer 1

У вас есть две проблемы. В $scope.addNew():

$scope.userList.push(currentUser); 

Эта линия толкает ссылку на объект же редактируемой. Вот почему пользователи появляются связаны, потому что у вас один и тот же объект в списке дважды.Вы вместо этого нужно скопировать свойства объекта на новый объект, который вы можете сделать в этом случае с angular.extend():

$scope.userList.push(angular.extend({}, currentUser)); 

Вы могли бы вместо того, чтобы рассмотреть вопрос о том «добавить новый» кнопка просто добавить пустой пользователя к список и выбрать его для редактирования:

$scope.addNew = function() { 
    $scope.userList.push($scope.currentUser = {}); 
}; 

в $scope.removeItem(), вы используете pop() метод массива, чтобы попытаться удалить определенный элемент, но pop() удаляет последний элемент и фактически не принимает никаких аргументов:

$scope.userList.pop(currentUser); 

Вы можете просматривать список, чтобы удалить конкретный объект:

var i; 
for (i = 0; i < $scope.userList.length; ++i) { 
    if ($scope.userList[i] === currentUser) { 
     $scope.userList.splice(i, 1); 
     break; 
    } 
} 

Или вы могли бы использовать indexOf() но тест, что возвращаемое значение не равно -1, или splice() вызов будет удалить последний элемент из списка.