Существует несколько вопросов о том, как реализовать удаление элементов внутри директивы ngRepeat, и, как я выяснил, это сводится к использованию ngClick и запускает некоторые функции удаления, передавая ему элемент $индекс.
Однако я не смог найти нигде пример, где у меня есть несколько ngRepeats:
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href>Remove</a>
</div>
<div ng-repeat="phone in user.phones">
{{ phone }} <a href>Remove</a>
</div>
</div>
Для этого мне нужно будет создать $scope.removePhone и $scope.removeEmail, который будет вызываться с помощью ngClick в разделе "Удалить привязку", Но я ищу более общее решение. Тем более, что у меня много страниц с многими ngRepeats.
Я думал о написании директивы, которая будет помещена в Удалить привязку и будет делать что-то вроде этого:
- Найдите ngRepeat среди родительских элементов.
- Прочитайте, что он итерирует ( "user.emails" в первом случае, "user.phones" второй)
- Удалите элемент $index из модели THAT.
Таким образом, разметка будет выглядеть примерно так:
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href remove-directive="$index">Remove</a>
</div>
<div ng-repeat="phone in user.phones">
{{ phone }} <a href remove-directive="$index">Remove</a>
</div>
</div>
Я ищу то, что я ищу, и что было бы предпочтительным способом сделать это?
Текущее хакерское решение
Вот как я это делаю сейчас. Он взломан и уродлив, но выполняет свою работу, пока не выясню более красивый способ.
myAppModule.controller('MyController', function ($scope, $parse, $routeParams, User) {
$scope.user = User.get({id: $routeParams.id});
$scope.remove = function ($index, $event) {
// TODO: Find a way to make a directive that does this. This is ugly. And probably very wrong.
var repeatExpr = $($event.currentTarget).closest('[ng-repeat]').attr('ng-repeat');
var modelPath = $parse(repeatExpr.split('in')[1].replace(/^\s+|\s+$/g, ''));
$scope.$eval(modelPath).splice($index, 1);
};
});
И в DOM:
<div ng-repeat="email in user.email" class="control-group">
<label class="control-label">
{{ "Email Address"|_trans }}
</label>
<div class="controls">
<input type="text" ng-model="email.address">
<span class="help-inline"><a href ng-click="remove($index, $event)">{{ "Delete"|_trans }}</a></span>
</div>
</div>