javascript - 在 Angular 转发器中对动态数组使用拼接

Question

尝试使用拼接从数组中删除对象时遇到问题。我有一个通过 UI 动态创建并存储在名为 $scope.productAttributes.Products 的范围变量中的数组。这是它看起来像的一个例子......

[
{
    "ProductLabel":"Net",
    "Code":"ela",
    "Site":"SITE1"
},
{
    "ProductLabel":"Link",
    "Code":"eli",
    "Site":"SITE1"
},
{
    "ProductLabel":"24-port managed PoE switch",
    "Code":"24p",
    "Site":"SITE2"
},
{
    "ProductLabel":"Dedicated Firewall",
    "Code":"ded",
    "Site":"SITE2"
},
{
    "ProductLabel":"Link",
    "Code":"eli",
    "Site":"SITE3"
},
{
    "ProductLabel":"IPv4 Addresses",
    "Code":"ip4",
    "Site":"SITE3"
}
]

然后我在 Angular 中继器中显示该数组，并按“站点”对其进行分组(这可能是问题的一部分)...

<div ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">
    <strong>{{key}}</strong>
    <div ng-repeat="site in value">
        <h4>{{site.ProductLabel}}</h4>
        <sapn href="" ng-click="deleteItem($index)" class="text-danger">Remove {{site.ProductLabel}}</span>
    </div>
</div>
</div>

在删除按钮上，我传入对象的索引并使用拼接函数...

 $scope.deleteItem = function (index) {
        $scope.productAttributes.Products.splice(index, 1);
};

所以问题是 $index 始终为零(我从 console.log 注意到了这一点)，正如我提到的，我认为这可能取决于 groupBy，但我不确定。有人知道出了什么问题吗？谢谢

更新:

问题似乎出在嵌套转发器中的 $index 上。所以如果结构上面的 json 是...

站点 1:

产品:净值 - $index:0

产品:链接 - $index:1

站点 2:

产品:24 端口 - $index:0

产品:专用 - $index:1

站点 3:

产品:链接 - $index:0

产品:IPV4 - $索引:1

因此，如果我尝试删除 SITE3 中的 IPV4 产品，它会删除 Site1 中的 LINK 产品，因为它具有相同的 $index。有什么办法可以解决这个问题吗？

Answer 1

我们不能依赖 $index，因为它不包含从数组中删除项目后的更新值。

从 UI 动态传递对象并使用以下代码将其从模型中删除:

在 Html 中:

<div ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">
    <strong>{{key}}</strong>
    <div ng-repeat="site in value">
        <h4>{{site.ProductLabel}}</h4>
        <sapn href="" ng-click="deleteItem(site)" class="text-danger">Remove {{site.ProductLabel}}</span>
    </div>
</div>
</div>

在 JavaScript 中:

$scope.productAttributes.Products.splice
    ($scope.productAttributes.Products.indexOf(site), 1);

这会导致模型使用中继器中的更新值进行更新，并在 UI 上重新呈现它。