Question

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);
}

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

有趣的是，即使丢失了选中的单选按钮的行，doc.status的值也始终显示值（0、1、2或3）。

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

Answer 1

我建议使用filter（）。我不确定如果通过对象使用indexOf（）会发生什么。

假定doc.id是每个文档对象的唯一属性。考虑使用filter（）通过对象属性过滤文档数组。这将有助于使您的代码更具可预测性。

如果您已经具有 ng模型，我也将删除 ng检查。

因此将代码更改为：

<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);
    }

Answer 2

这听起来很疯狂，但是删除名称属性解决了这个问题。我不知道为什么，但是在更改之后，问题消失了。

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

2 个答案: