尝试使用拼接从数组中删除对象时遇到问题。我有一个通过 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。有什么办法可以解决这个问题吗?
最佳答案
我们不能依赖 $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 上重新呈现它。
关于javascript - 在 Angular 转发器中对动态数组使用拼接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29343437/