Question

我正在尝试使用Angular.js实现基于Web的表，以便可以使用单选按钮选择每一行。行可以向上或向下交换，选择状态应与行交换在一起。到目前为止，可以添加新行，行交换工作正常，并且在用户单击单选按钮时更新所选行索引的范围变量。

我遇到的问题是所选的单选按钮状态和范围变量不同步。更具体地说，在行交换期间正确更新范围变量时，通常在交换后取消选择单选按钮。也可能发生选定的单选按钮与范围变量中的索引不同。

欢迎任何有关如何解决此问题的建议！

到目前为止我已经实现的JSFiddle可以在这里找到：

HTML代码

ORDER BY

Javascript / Angular.js代码

<div ng-controller="SelectTableController">
<table id="select-table">
<thead>
    <tr>
        <th> Text </th>
        <th> Select? </th>
        <th> </th>
        <th> </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in entries">
        <td> {{x['text']}} (id: {{$index}}) </td>
        <td> <input type="radio" ng-model="$parent.selectedchoice" name="selectedchoice" value="{{$index}}"/> </td>
        <td>
            <button type="button" ng-click="moveUpEntry(x)" ng-show="$index > 0"> Move up </button> 
            <button type="button" ng-click="moveDownEntry(x)" ng-show="$index < entries.length-1"> Move down </button>
        </td>
    </tr>
</tbody>
</table>

<div>
    <input type="text" ng-model="newtext"> </input>
    <button type="button" ng-click="addEntry()"> Add </button>
</div>
<div> <tt> Selected Choice: {{selectedchoice}} </tt> </div>
</div>

Answer 1

您的单选按钮应该是＆＃34;行＆＃34;的一部分。并使用

检查单选按钮

checked="checked"

你不能像你一样检查它们

<input type="radio" ng-model="$parent.selectedchoice" name="selectedchoice" value="{{$index}}"/>

我试图修复你的jsFiddle atm。

更新Angular.js中单选按钮的ngModel

1 个答案: