Как обрабатывать элементы при рекурсивном вызове «ng-repeat» ? (Исправлено)

Question

[pofigizm]

Заголовок наверно не правильный, попытаюсь объяснить, если что - спрашивайте - уточню:

Есть рекурсивный вызов ng-repeat (part in parts), как удалить текущий part из parts на любом "уровне".
В файле parts.html есть ссылка "Remove this" с ng-click="" (Хочу заставить его работать).
plnkr.co/edit/rSVvK8U3qQ09LFdiv2S0

Дополнительно: у меня есть еще две кнопки (Add child и Remove сhilds), которые работают, но я не уверен в правильности такого решения:

// в html
<a ng-click='part=removeChilds(part)'>Remove childs</a>
// в контроллере
$scope.removeChilds = function (part) {
  delete part.parts;
  return part;
};

Как правильно такое делать? Или это нормально?

++ UPD
в принципе я заставил его работать:

// в html
<a ng-click='$parent.$parent.part=removeThis($parent.$parent.part, $index)'>R...s</a>
// в контроллере
$scope.removeThis = function (parent, index) {
      parent.parts.splice(index);
      return parent;
 };

plnkr.co/edit/Bijxyat98l9yKxMvzp6v

Вопрос остается:
Как правильно такое делать? Или это нормально?

++ UPD - Изменил тему!

Answer 1

[Mikhail Osher]

Во время ngRepeat доступна переменная $index.
Использовать вроде такого:

<div data-ng-repeat="cock in cocks">
    <p data-ng-bind="cock.title"></p>
    <a href="" data-ng-click="removeCock($index)">&times;</a>
</div>

$scope.removeCock = function(index) {
    $scope.cocks.splice(index, 1);
};

// upd

А такой вариант сработает?

<div data-ng-repeat="cock in cocks">
    <p data-ng-bind="cock.title"></p>
    <a href="" data-ng-click="cocks.splice($index, 1)">&times;</a>
</div>

Comments

[pofigizm]

Есть рекурсивный вызов ng-repeat ... т.е. в контроллере я не знаю какой сейчас "уровень":
$scope.orders[0].parts.splice(index, 1);
или
$scope.orders[0].parts[0].parts[0].parts.splice(index, 1);
да и элементы в массивах я тоже не знаю (там где я нули поставил).

[pofigizm]

Сработал вот-такой
ng-click='$parent.$parent.part.parts.splice($index,1)'
plnkr.co/edit/Bijxyat98l9yKxMvzp6v

Answer 2

[pofigizm]

Можно добавить методов самим данным:

// создаем конструктор "класса" и нужные методы
    function Order(name) {  
      this.name = name;
    }
    Order.prototype.addChild = function () {
      this.parts = this.parts || [];
      var levelName = this.name + '-' + (this.parts.length + 1);
      this.parts[this.parts.length] = new Order(levelName);
    };
    Order.prototype.removeChild = function (index) {
      if (index === undefined) {
        delete this.parts;
      } else if (index > -1 && index < this.parts.length) {
        this.parts.splice(index, 1);
        if (this.parts.length === 0) delete this.parts;
      }
    };
    
//  имитация тех данных, которые приходят с сервера (в примере)
    var prepareOrders = [];
    prepareOrders[0] = new Order('part 1');
    prepareOrders[0]['_id'] = '123456';
    prepareOrders[1] = new Order('part 2');
    prepareOrders[1]['_id'] = '234567';

// Вставляем в $scope
    $scope.orders = prepareOrders;

и затем в вызовах ng-click можно обращаться к методам этих "объектов" и "под-объектов":

<a href='' ng-click='$parent.$parent.part.removeChild($index)'>Remove this</a>
<a href='' ng-click='part.addChild()'>Add child</a>
<a href='' ng-click='part.removeChild()'>Remove childs</a>

Вот так это работает:
embed.plnkr.co/DHEbQeyxySjOhk5kdlLh/preview

Как Вам такой вариант? Мне он больше нравится, т.к. эти методы вообще с сервера получать можно.