Question

我正在尝试重新创建一个真正的问题，所以这个例子可能看起来很奇怪，但它肯定会解决我的问题。如果你能帮助我，我将不胜感激。

我有一个按钮，点击它，它会生成3个动态下拉列表（一个名为$ scope.dropdown的变量被送入，包含$ scope.aAnimals数组的动物列表，目前有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);
}

http://plnkr.co/edit/gFyj0YHH1WZQ79lDyizS?p=preview

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

Answer 2

在这里，你需要在HTML中删除函数中传递$index作为参数。

ng-click='delete($index)'

因为传递索引你不需要在删除功能中获取索引。之后，您需要删除$scope.dropdown和$scope.MyAnimals，因为这两个范围都在ng-repeat中。如果您仅删除dropdown而不是基于MyAnimals范围的dropdonw apply值。所以你的删除功能就像这样

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

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

2 个答案: