Javascript 在角直放站中使用动态阵列拼接

我在尝试使用splice从数组中删除对象时遇到问题。我有一个通过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"
}
]

然后，我在一个角度转发器中显示该阵列，并按“站点”对其进行分组（这可能是问题的一部分）

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

更新：

<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>

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

问题似乎在于嵌套中继器中的$index。所以如果结构上面的json是

地点1：

产品：净值-$index:0

产品：链接-$index:1

地点2：

产品：24端口-$index:0

产品：专用-$索引：1

地点3：

产品：链接-$index:0

产品：IPV4-$index:1

---

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

好的-我最后就是这样做的，而且似乎很有效

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

---

因此，传递整个对象似乎起了作用。我不知道为什么。

好的-我最终这样做了，而且似乎奏效了

$scope.deleteItem = function (item) {
        var index = $scope.productAttributes.Products.indexOf(item);
        $scope.productAttributes.Products.splice(index, 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>

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

---

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

我们不能依赖$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>

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

---

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

那么

按$index跟踪如何？嘿，谢谢你的回答。我试着这么做，但没用。当我添加ng repeat=“site in value track by$index”时，它删除了数组中的最后一个对象，我在track by上读到了更多内容，看起来这可能是一个修复。但是我需要数组中每个对象都有一个唯一的标识符，这样它才能工作-对吗？那么
按$index跟踪如何？嘿，谢谢你的回答。我试着这么做，但没用。当我添加ng repeat=“site in value track by$index”时，它删除了数组中的最后一个对象，我在track by上读到了更多内容，看起来这可能是一个修复。但是我需要数组中每个对象都有一个唯一的标识符，这样它才能工作-对吗？我想我们两个在同一时间写的都是一样的+1.：）我想我们俩是在同一时间写的+1.:)