Question

我在网页上有3个单独的位置。我想让ng-clicks从ng-repeat之外的点单独引用这3个。

有点像：

<div ng-repeat="x in data.y" ng-if="x.data.type == 'type1'">
DATA PULLED FROM DB, DISPLAYED IN A LIST
</div>
<div ng-repeat="x in data.y" ng-if="x.data.type == 'type2'">
DATA PULLED FROM DB, DISPLAYED IN A LIST
</div>

然后，在那些地方之外。我有

<button ng-click"delete_thing(x)">

还有其他地方。

<button ng-click"delete_thing(x)">

我以前，当他们在那些ng-repeats里面没有问题时。他们也会删除我想要的列表项而不会出现问题。现在，他们根本不删除。我知道我不能告诉它知道要删除什么。我该如何指定？

Javascript如下：

    $scope.delete_thing = function (x) {
                            var id = x.id;
                            $.ajax({
                                type: "POST",
                                url: "/dashboard/profile/delete/x/" + id + "/",
                                data: {'csrfmiddlewaretoken': getCookie('csrftoken')},
                                success: function () {
                                    console.log('sent and ok');
                                }
                            })
                        };

Answer 1

如果我理解您要执行的操作，请封装删除方法并在应用程序的不同位置重复使用。
考虑到这一点，正如评论所示，关键是决定和汇总哪些项目被选中有许多简单的方法可以解决它，但我认为您可以从创建通用解决方案中受益，如下所示无论你选择哪个选择元素（复选框，广播，自定义等），我都会介绍两个指令：
第一个只是切换项目选择并从容器中推或拉项目：

app.directive('selectableItem', function() {
    return {
        restrict: 'A',
        require: '^selectionContainer'
        link: function (scope, element, attrs, selectionContainerCtrl) {
            // Everyitem selection toggler (checkbox, radio, custom) should attach its selection function to toggleSelection method.
            scope.toggleSelection = function(item) {
                if (item.isSelected) {
                    selectionContainerCtrl.add(item);
                } else {
                    selectionContainerCtrl.add(remove);
                }
            }
        }
   }
})

第二个是聚合容器中项目的实际容器：

app.directive('selectionContainer', function() {
        return {
            restrict: 'A',
            controller: function ($scope) {
                $scope.items = [];
                this.add = function(item) {
                    $scope.items.push(item);
                }

                this.remove = function(item) {
                    $scope.items.splice($scope.items.indexOf(item), 1);
                }
            },
            link: function (scope, element, attrs) {
                scope.delete_things = function () {
                                // iterate through items and delete them:
                                angular.forEach($scope.items, function(item) {
                                     $.ajax({
                                        type: "POST",
                                        url: "/dashboard/profile/delete/x/" + item.id + "/",
                                        data: {'csrfmiddlewaretoken': getCookie('csrftoken')},
                                        success: function () {
                                            console.log('sent and ok');
                                        }
                                    })
                                })

                            };
            }
       }
    })

现在你所要做的就是在选择或取消选择项目时调用项目上的toggleSelection，并添加你的删除按钮：

<div selection-container>
    <div ng-repeat="x in data.y" ng-if="x.data.type == 'type1'">
        DATA PULLED FROM DB, DISPLAYED IN A LIST
    </div>
    <button ng-click"delete_things()"></button>
</div>

这里要注意的关键是“selectableItem”需要“selectionContainer”，因此每次使用时它都会引入一个新的容器，并且这些项目不会混在一起。

P.S。此解决方案可以删除多个项目。如果您使用列表（一次只选择一个项目），它也会起作用。

<强> /编辑/
Here是一个完整的工作示例。根据您选择的实际元素，您应该修改选择切换。

如何在ng-repeat之外进行ng-click调用ng-repeat数据？

1 个答案: