Удалить динамически динамически, всегда удалять последний

Я пытаюсь воссоздать настоящую проблему, поэтому этот пример может показаться странным, но это, безусловно, решит мою проблему. Буду признателен, если вы сможете мне помочь.Удалить динамически динамически, всегда удалять последний

У меня есть кнопка, которая нажимает на нее, она генерирует 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

источник

2017-01-18 yavg

Технически за кулисами, он удаляет правильный пункт, но стоимость вашего выпадающего списка сохраняет первое значение, и это выглядит как последний элемент удаляется. Я обновил ваш plunkr, чтобы увидеть это поведение. – CrazyMac

Этот код работает нормально, так что логика по умолчанию выбирает '$ scope.MyAnimals [i] = $ scope.aAnimals [i]' делает ее запутанной. Я не смог загрузить ваш plunkr, поэтому я создал новый, исправляющий эту проблему - $ https: //plnkr.co/edit/YosI3hspWGe0uODLXBqK? P = preview – Developer

Он удаляет правильный пункт, но стоимость вашего объема MyAnimals не updating.So вы должны удалить элемент из области 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="[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 –

Здесь вам нужно передать $index в качестве аргумента в функции удаления из HTML.

ng-click='delete($index)'

Поскольку при прохождении индекса вам не нужно указывать индекс в функции удаления. После этого вам необходимо удалить $scope.dropdown и $scope.MyAnimals, потому что оба варианта указаны в ng-repeat. если вы удаляете только раскрывающееся меню, чем значение dropdonw, применяемое на основе области MyAnimals. Так что ваша функция удаления как этот

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

источник

2017-01-18 05:52:46

Удалить динамически динамически, всегда удалять последний

ответ

Смежные вопросы