删除元素时未选中单选按钮答案

【问题标题】：Radio button get unselected when removing elements删除元素时未选中单选按钮
【发布时间】：2019-11-13 16:15:14
【问题描述】：

Angularjs 应用在这里。重复将打印带有元素的表格。其中一列包含 4 个单选按钮，而另一列将包含一个用于删除元素的按钮。

<div ng-repeat doc in myCtrl.documents>
<input type="radio" ng-checked="doc.status == 0" ng-model="doc.status" name="status_{{doc.id}}" value="0" />Opt0
<input type="radio" ng-checked="doc.status == 1" ng-model="doc.status" name="status_{{doc.id}}" value="1" />Opt1
<input type="radio" ng-checked="doc.status == 2" ng-model="doc.status" name="status_{{doc.id}}" value="2" />Opt2
<input type="radio" ng-checked="doc.status == 3" ng-model="doc.status" name="status_{{doc.id}}" value="3" />Opt3
doc.status:{{doc.status}}
<button ng-click="myCtrl.removefunc(doc)">remove</button>

</div>

这是控制器中的代码：

function removefunc(doc){
    var index = myCtrl.documents.indexOf(doc);
    documents.splice(index, 1);
}

现在，当我删除一个元素时，如果删除的下面还有其他列出的，就会发生一件很奇怪的事情。每两行，选中的单选按钮就会消失。我的意思是，单选按钮在那里，但没有一个被选中。 4 个单选按钮均未选中。

有趣的部分是 doc.status 的值总是显示值（0、1、2 或 3），即使是那些丢失选中单选按钮的行。

我首先尝试使用 ng-value 而不是 ng-checked 以及。在 ng-checked 中与字符串而不是数字进行比较。但仍然没有运气。文档数组的内容对我来说似乎很好。可能是什么错误？

【问题讨论】：

我认为您的问题源于使用ng-checked。你应该只需要ng-model 和value。与此一起使用ng-checked 有时会导致奇怪的结果。你有 plunker 或 jsfiddle 让我仔细看看吗？

标签： angularjs

【解决方案1】：

我建议使用 filter()。我不确定如果你通过一个对象使用 indexOf() 会发生什么。

假设 doc.id 是每个文档对象的唯一属性。考虑使用 filter() 按对象属性过滤文档数组。这只会帮助您的代码更可预测。

如果您已经有 ng-model，我也会删除 ng-checked。

因此将您的代码更改为：

<div ng-repeat doc in myCtrl.documents>
<input type="radio" ng-model="doc.status" name="status_{{doc.id}}" value="0" />Opt0
<input type="radio" ng-model="doc.status" name="status_{{doc.id}}" value="1" />Opt1
<input type="radio" ng-model="doc.status" name="status_{{doc.id}}" value="2" />Opt2
<input type="radio" ng-model="doc.status" name="status_{{doc.id}}" value="3" />Opt3
doc.status:{{doc.status}}
<button ng-click="myCtrl.removefunc(doc)">remove</button>

</div>  

    function removefunc(doc) {
        myCtrl.documents = myCtrl.documents.filter(el => el.id !== doc.id);
    }

【讨论】：

【解决方案2】：

这听起来可能很疯狂，但删除 name-attribute 解决了问题。我不知道具体原因，但更改后问题就消失了。

【讨论】：