Javascript 从下拉列表到列表和从列表到下拉列表添加值

我的代码功能有问题，当我从dropdow将人员添加到列表或从列表返回到下拉列表时，会出现很多错误。同一个人被添加2次，或者当我删除一个人时，另一个人被删除，我不确定错误/错误在哪里，也许你可以帮我解决

HTML:

{{Person}}


；
{{person.name}

控制器：

var $scope;
var app = angular.module("myapp", []);

app.controller("Ctrl", function($scope) {
  $scope.persons = [];
  $scope.Persons = [];
  var deletedPers = "";

  $scope.getPersons = function() {
    $scope.Persons = ["Tom", "Jerry"];
  };

  $scope.initSavedPersons = function() {
    var initPers = ["Max", "Alfi"];
    for (var i = 0; i < initPers.length; i++) {
      $scope.persons.push({ name: initPers[i] });
    }
  };

  $scope.addPerson = function() {
    var index = 0;
    $scope.persons.push({ name: $scope.selectedPerson });
    for (var i = 0; i < $scope.Persons.length; i++) {
      if ($scope.Persons[i] == $scope.selectedPersons) {
        index = i;
      }
    }

    console.log(index);
    $scope.Persons.splice(index, 1);
    $scope.Persons.sort();
  };

  $scope.getDeletedPerson = function(obj) {
    deletedPers = obj.currentTarget.nextElementSibling.innerHTML;
  };

  $scope.deletePerson = function(index) {
    $scope.persons.splice(index, 1);
    $scope.Persons.push(deletedPers);
  };
});

var$scope；
var-app=angular.module（“myapp”，[]）；
应用程序控制器（“Ctrl”，函数（$scope）{
$scope.persons=[]；
$scope.Persons=[]；
var deletedPers=“”；
$scope.getPersons=函数（）{
$scope.Persons=[“汤姆”、“杰瑞”]；
};
$scope.initSavedPersons=function（）{
var initPers=[“Max”，“Alfi”]；
对于（var i=0；i

我使用lodash操作数组。请检查下面的代码

var$scope；
var-app=角度。模块（'myapp'，[]）。常数（'uu'，窗口。'uu）；
函数Ctrl（$scope）{
$scope.persons=[]；
$scope.Persons=[]；
var deletedPers=“”；
$scope.getPersons=函数（）{
$scope.Persons=[“汤姆”、“杰瑞”]；
}
$scope.initSavedPersons=函数（）{
var initPers=[“Max”，“Alfi”]；
initPers.sort（）；
对于（var i=0；i

.pers ul{
列表样式：无；
左侧填充：0；
边缘顶部：25px；
}
李先生{
边框：1px纯黑；
显示：内联块；
填充物：5px10px；
右边距：5px；
边缘底部：5px；
文本转换：大写；
}

{{Person}}


；
{{person.name}

这是您的代码，没有外部库和错误修复。在更改之前，我已经发表了评论

var$scope；
var-app=angular.module（“myapp”，[]）；
应用程序控制器（“Ctrl”，函数（$scope）{
//更改了变量名称，以便易于识别。
$scope.addedPersons=[]；
$scope.dropDownPersons=[]；
//在函数initSavedPersons之外添加了它
$scope.initPers=[“Max”，“Alfi”]；
$scope.getPersons=函数（）{
$scope.dropDownPersons=[“汤姆”、“杰瑞”]；
};
$scope.initSavedPersons=function（）{
//使用map函数生成数组
$scope.addedPersons=$scope.initPers.map（函数（项）{
返回{name:item}；
});
};
$scope.addPerson=函数（）{
$scope.addedPersons.push（{name:$scope.selectedPerson}）；
//使用findIndex函数
变量索引=$scope.dropDownPersons.findIndex（函数（项）{
返回项==$scope.selectedPerson；
});
$scope.dropDownPersons.splice（索引1）；
$scope.dropDownPersons.sort（）；
};
//删除了不必要的函数getDeletedPerson
//将删除对象传递给函数
$scope.deletePerson=函数（deletingPerson）{
//再次使用findIndex
变量索引=$scope.addedPersons.findIndex（函数（项）{
return item.name==deletingPerson.name；
});
//添加到下拉列表
$scope.dropdownperson.push（deletingPerson.name）；
$scope.addedPersons.splice（索引1）；
};
});

第1页
{{dropDownPerson}}


；
{{addedPerson.name}


你能在不引入Lodash的情况下做同样的事情吗？@MuratTüfekçi谢谢，它工作得很好，我会尝试找到一种没有额外库的方法
var $scope;
var app = angular.module("myapp", []);

app.controller("Ctrl", function($scope) {
  $scope.persons = [];
  $scope.Persons = [];
  var deletedPers = "";

  $scope.getPersons = function() {
    $scope.Persons = ["Tom", "Jerry"];
  };

  $scope.initSavedPersons = function() {
    var initPers = ["Max", "Alfi"];
    for (var i = 0; i < initPers.length; i++) {
      $scope.persons.push({ name: initPers[i] });
    }
  };

  $scope.addPerson = function() {
    var index = 0;
    $scope.persons.push({ name: $scope.selectedPerson });
    for (var i = 0; i < $scope.Persons.length; i++) {
      if ($scope.Persons[i] == $scope.selectedPersons) {
        index = i;
      }
    }

    console.log(index);
    $scope.Persons.splice(index, 1);
    $scope.Persons.sort();
  };

  $scope.getDeletedPerson = function(obj) {
    deletedPers = obj.currentTarget.nextElementSibling.innerHTML;
  };

  $scope.deletePerson = function(index) {
    $scope.persons.splice(index, 1);
    $scope.Persons.push(deletedPers);
  };
});