2015-03-26 4 views
0

У меня есть следующие ng-repeat:Угловое сращивание скрывается ошибка

<li class="list-group-item module" draggable="true" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules"> 
    <span class="pull-left media-xs draggable" style="margin-top: 5px;"><i 
      class="fa fa-sort text-muted fa m-r-sm"></i></span> 

    <div class="clear"> 

     <div class="col-md-4 col-xs-10"> 
      <button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color" 
        style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name}} 
      </button> 
      <span class="text text-muted">Modul</span> 
     </div> 
         <span class="pull-right"> 
          <a class="btn btn-md pull-right no-padder" title="" ng-click="deleteModule(module);"><i 
            class="fa fa-times text-danger text"></i></a> 
         </span> 

     <div class="col-lg-5 col-xs-11"> 
      <div class="input-group m-b"> 
       <div class="input-group-btn"> 
        <button class="btn btn-info" onclick="changeModule(module)" data-toggle="modal" 
          data-target="#modal_select_module" style="font-size: 10px;" 
          type="button"><i class="fa fa-plus"></i> Skift modul 
        </button> 
       </div> 
       <!-- /btn-group --> 
       <input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" 
         disabled=""> 
      </div> 
     </div> 
    </div> 
</li> 

В этом у меня есть функция удаления:

ng-click="deleteModule(module);" 

Это вызывает следующую функцию:

$scope.deleteModule = function(module) 
{ 
    $http({ 
     url: api.getUrl('deleteAcademyModule',$scope.current_id), 
     method: "POST", 
     data: {module_id:module.module_id, academy_id: $scope.current_id} 
    }).success(function (data, status, headers, config) { 

    }).error(function (data, status, headers, config) { 
    }); 
    $scope.academyModules.splice(module,1); 
} 

Проблема заключается в том, что, когда я нажимаю кнопку удаления, правильный модуль удаляется из базы данных с помощьюоднако неправильная деталь удаляется/скрыта из списка:

enter image description here

Теперь давайте говорить, что я удалить средний элемент (красный ака Test)

Список будет выглядеть следующим образом:

enter image description here

Как вы можете видеть, что удалили выше пункт из списка, однако идентификатор передается в базу данных соответствует среднему объект так, когда я обновить мою страницу У меня есть следующий (правильный) вид:

enter image description here

Может кто-нибудь сказать мне, что, черт возьми, происходит?

+0

Вы можете предоставить демо? Где вы находитесь 'current_id'? – Brian

ответ

1

Решение 1:

Если вы хотите, чтобы индекс текущего элемента в пределах ng-repeat, вам нужно использовать переменную $index.

Таким образом, вы можете заменить:

ng-click="deleteModule(module);"

по

ng-click="deleteModule($index);"

Ваш splice метод будет делать правильную работу.

Решение 2:

Вы можете изменить метод в контроллере, чтобы получить индекс элемента:

var pos = $scope.academyModules.indexOf(module); 
if (-1 !== pos) { 
    $scope.academyModules.splice(pos, 1); 
} 
+0

Работал как шарм с индексом: p –

1

Проверил:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

array.splice(start, deleteCount[, item1[, item2[, ...]]]) 

Вы должны попробовать указательный модуль le по индексу:

массив.сращивание (1, 1); // Удалить из 1-ой позиции, один элемент

(Изменить первые из параметров для вас вара, в настоящее время называется «модуль», но передать указатель)

1

модуля является объектом, если я не ошибаюсь, попытайтесь поместить его индекс в качестве параметра функции сращивания вместо:

$scope.academyModules.splice($scope.academyModules.indexOf(module),1); 
1

в этом коде $scope.academyModules.splice(module,1); вы модуля не представляет собой целое число.

Может быть, вы можете сделать это вместо того, чтобы:

ng-click="deleteModule(module, $index);"

Тогда в контроллере:

$scope.deleteModule = function(module, pos) 
{ 
    $http({ 
     url: api.getUrl('deleteAcademyModule',$scope.current_id), 
     method: "POST", 
     data: {module_id:module.module_id, academy_id: $scope.current_id} 
    }).success(function (data, status, headers, config) { 

    }).error(function (data, status, headers, config) { 
    }); 
    $scope.academyModules.splice(pos,1); 
} 
1

Я думаю, что это из-за способа сращивания() работает. Первый аргумент - это индекс, где начинается сращивание, но область, в которой вы «сращиваетесь», не будет включать элемент, расположенный в этой позиции в массиве, поскольку индексы начинаются с нуля. Следующий код НЕ будет сращивать первый элемент массива. Я предполагаю, что вы заполняете свой список снизу вверх, и поэтому верхний элемент удаляется (потому что последовательно он приходит после элемента, который вы пытаетесь удалить).

var list = [1,2,3,4]; 

list.splice (1, 1);

console.log (список);

http://codepen.io/nhmaggiej/pen/LEqKvm

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