ドロップダウンリストを動的に削除して、最後のものを必ず削除してください

実際の問題を再現しようとしていますので、この例は奇妙に見えるかもしれませんが、あなたが私を助けることができれば、私はそれを感謝します。ドロップダウンリストを動的に削除して、最後のものを必ず削除してください

ボタンをクリックすると、3つの動的なドロップダウンが生成されます（$ scope.aAnimals配列を含む動物のリストとともに、$ scope.dropdownという変数が与えられ、現在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

出典

2017-01-18 yavg

ようなあなたの削除機能は、技術的には舞台裏で、それは正しい項目を削除しますが、あなたのドロップダウンリストの値が最初の値を保持し、最後の項目が削除されたように見えます。この現象を見るためにplunkrを更新しました。 – CrazyMac

あなたはコードが正常に動作しています。デフォルトのロジック '$ scope.MyAnimals [i] = $ scope.aAnimals [i]'を選択すると混乱します。私はplunkrを読み込めませんでしたので、この問題を修正して新しいファイルを作成しました - $ https：//plnkr.co/edit/YosI3hspWGe0uODLXBqK？p = preview – Developer

それは正しい項目を削除しますが、あなたのMyAnimalsの範囲の値は、あなたにもMyAnimalsの範囲から項目を削除する必要がupdating.Soありません。ここで

<html ng-app="app"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script data-require="[email protected]*" 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>

出典

2017-01-18 05:50:34 kamlesh

このリンクをチェックしてください。 http://plnkr.co/edit/SHrL9NcmG5K7qe1u9NeI?p=preview –

あなたはHTMLから削除関数に引数として$indexを渡す必要があります。

ng-click='delete($index)'

インデックスを渡すので、削除機能でインデックスを取得する必要はありません。その後、両方のスコープがng-repeatにあるため、$scope.dropdownと$scope.MyAnimalsを削除する必要があります。 DropDonwの値よりドロップダウンだけを削除すると、MyAnimalsスコープに基づいて適用されます。だからこの

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

出典

2017-01-18 05:52:46

ドロップダウンリストを動的に削除して、最後のものを必ず削除してください

答えて

関連する問題