Javascript 动态删除下拉列表，始终删除最后一个下拉列表_Javascript_Angularjs

Javascript 动态删除下拉列表，始终删除最后一个下拉列表

javascript angularjs

Javascript 动态删除下拉列表，始终删除最后一个下拉列表,javascript,angularjs,Javascript,Angularjs,我试图重现一个真实的问题，所以这个例子可能看起来很奇怪，但它肯定会解决我的问题我有一个按钮，点击它，它会生成3个动态下拉列表（一个名为$scope.dropdown的变量，包含$scope.aa动物数组的动物列表，当前有3个元素，但将来可以是“n”元素）我的问题：我想删除所选项目。但最后一个总是被删除。我能做什么 <div ng-repeat='item in dropdown track by $index'> <select class="form-co

我试图重现一个真实的问题，所以这个例子可能看起来很奇怪，但它肯定会解决我的问题

我有一个按钮，点击它，它会生成3个动态下拉列表（一个名为$scope.dropdown的变量，包含$scope.aa动物数组的动物列表，当前有3个元素，但将来可以是“n”元素）

我的问题：我想删除所选项目。但最后一个总是被删除。我能做什么

<div ng-repeat='item in dropdown track by $index'>
   <select class="form-control animal" ng-model='MyAnimals[$index]'  
  ng-options="opt as opt.animal for opt in aAnimals">
     <option value="">Select an animal</option>
  </select>
    <button type="button" ng-click='delete(item)'  class="btn btn-default">
        delete    
    </button>
</div>
<button ng-click='add()' >generate</button>

$scope.obj = {}
$scope.aAnimals=
[
 { "animal": "cat"},  //first dropdown
 { "animal": "dog"},  //second dropdown
 { "animal": "parrot"}  //third dropdown
]

$scope.MyAnimals = [];
$scope.add=function(){
$scope.dropdown=[];
for(var i in $scope.aAnimals){
 $scope.dropdown.push({ "animal": $scope.aAnimals[i].animal });
 $scope.MyAnimals[i] = $scope.aAnimals[i]; //El modelo de cada Select
 }
}

$scope.delete=function(item){
 var index = $scope.dropdown.indexOf(item);
 $scope.dropdown.splice(index, 1);
}


挑选一种动物
删除
生成
$scope.obj={}
$scope.a动物=
[
{“动物”：“猫”}，//第一个下拉列表
{“动物”：“狗”}，//第二个下拉列表
{“动物”：“鹦鹉”}//第三个下拉列表
]
$scope.MyAnimals=[]；
$scope.add=函数（）{
$scope.dropdown=[]；
for（变量i在$scope.aAnimals中）{
$scope.dropdown.push（{“动物”：$scope.aAnimals[i].animal}）；
$scope.MyAnimals[i]=$scope.aAnimals[i]；//El modelo de cada Select
}
}
$scope.delete=函数（项）{
变量索引=$scope.dropdown.indexOf（项目）；
$scope.dropdown.splice（索引，1）；
}

它会删除正确的项目，但MyAnimals范围的值不会更新。因此，您也必须从MyAnimals范围中删除该项目

<html ng-app="app">
 <head>
  <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script>
    var SidController = function($scope){
      $scope.obj = {}
      $scope.aAnimals=
       [
        { "animal": "cat"},  //first dropdown
        { "animal": "dog"},  //second dropdown
        { "animal": "parrot"}  //third dropdown
     ]
     $scope.MyAnimals = [];
     $scope.add=function(){
      $scope.dropdown=[];
      for(var i in $scope.aAnimals){
        $scope.dropdown.push({ "animal": $scope.aAnimals[i].animal });
        $scope.MyAnimals[i] = $scope.aAnimals[i]; //El modelo de cada Select
       }
     }

     $scope.delete=function(item){
       var index = $scope.dropdown.indexOf(item);
       $scope.dropdown.splice(index, 1);
       $scope.MyAnimals.splice(index, 1);
     } 
 };
 SidController.$inject = ['$scope'];
 angular.module('app', []).controller('SidController', SidController);

</script>
</head>

<body ng-controller = "SidController">
  <div ng-repeat='item in dropdown track by $index'>
     <select class="form-control animal" ng-model='MyAnimals[$index]'  
        ng-options="opt as opt.animal for opt in aAnimals">
        <option value="">Select an animal</option>
     </select>
     <button type="button" ng-click='delete(item)'  class="btn btn-default">
     delete    
     </button>
  </div>
  <button ng-click='add()' >generate</button>
</body>


var SidController=函数（$scope）{
$scope.obj={}
$scope.a动物=
[
{“动物”：“猫”}，//第一个下拉列表
{“动物”：“狗”}，//第二个下拉列表
{“动物”：“鹦鹉”}//第三个下拉列表
]
$scope.MyAnimals=[]；
$scope.add=函数（）{
$scope.dropdown=[]；
for（变量i在$scope.aAnimals中）{
$scope.dropdown.push（{“动物”：$scope.aAnimals[i].animal}）；
$scope.MyAnimals[i]=$scope.aAnimals[i]；//El modelo de cada Select
}
}
$scope.delete=函数（项）{
变量索引=$scope.dropdown.indexOf（项目）；
$scope.dropdown.splice（索引，1）；
$scope.MyAnimals.splice（索引1）；
} 
};
SidController.$inject=['$scope']；
角度.module（'app'，[]）.controller（'SidController'，SidController）；
挑选一种动物
删除
生成

这里您需要将

$index

作为参数从HTML中删除函数

ng-click='delete($index)'

因为传递索引不需要在delete函数中获取索引。之后，您需要删除

$scope.dropdown

和

$scope.MyAnimals

，因为这两个作用域都在

ng repeat

中。如果仅删除dropdown，则dropdonw的值将基于MyAnimals范围应用。你的删除函数是这样的

$scope.delete=function(index){
   $scope.dropdown.splice(index, 1);
   $scope.MyAnimals.splice(index, 1);
}

从技术上讲，在幕后，它会删除正确的项目，但下拉列表的值保留第一个值，并且看起来像是删除了最后一个项目。我已经更新了您的plunkr以查看此行为。您的代码运行良好，只是默认选择的逻辑使它变得混乱。我无法加载您的plunkr，因此我在这里创建了一个新的plunkr，以解决此问题-$