AngularJs - 只允许在表中选择一项答案

【问题标题】：AngularJs - allow only one item to be selected in TableAngularJs - 只允许在表中选择一项
【发布时间】：2017-12-08 00:23:27
【问题描述】：

我正在使用智能表。我有一个逻辑，我只需要选择一个项目。我当前的表格代码允许选择多行。

这是我的 HTML：

 <table st-safe-src="flow3.dataSet" st-table="flow3.displayed" class="table table-striped">

                <thead>
                <tr>
                    <th st-sort="method">Method</th>
                    <th st-sort="sample">Sample</th>
                    <th st-sort="parameters">Parameters</th>
                </tr>
                </thead>
                <tbody ui-sortable ng-model="flow3.displayed">
                <tr ng-repeat="row in flow3.displayed track by $index" style="cursor: move;" ng-click="row.selected = !row.selected; flow3.selectRow($event, row)" ng-class="{success: row.selected}">
                    <td>{{row.method.name}}</td>
                    <td>{{row.sample}}</td>
                    <td>
                        <span ng-repeat="parameter in row.parameters">{{parameter.methodInputParameter.name}} : {{parameter.value}}<br/></span>
                    </td>
                    <td>
                        <button type="button" ng-click="flow3.removeItem(row)"
                                class="btn btn-danger btn-sm btn-round pull-right"
                                ng-disabled="flow3.confirmDisabled">
                            <i class="glyphicon glyphicon-trash"></i>
                        </button>
                    </td>
                </tr>
                </tbody>
</table>

这是我的 JS：

 flow3.selectRow = function($event, row) {
        flow3.selectedItem = row; 
}

【问题讨论】：

您只是想应用不同的类来突出显示该行吗？
嗨斯坦尼斯拉夫。突出显示的行的类无关紧要。我只是不能同时选择 2 行

标签： angularjs html-table angular-ui-bootstrap smart-table

【解决方案1】：

我建议查看智能表 github 页面和使用指南here。

特别是与您的问题相关的部分是“选择数据行”。

基本上，您需要使用 st-select-row 属性和 st-select-mode 来配置表格行 (tr) 元素内的点击。

【讨论】：

【解决方案2】：

如果您想要将selected 属性设置为true 的唯一row，您应该修改您的selectRow 方法以接受所有行的集合，然后在选择单击的一个之前取消选择所有行：

flow3.selectRow = function($event, row, rows) {
  //de-select all
  angular.forEach(rows, function(r){ r.selected = false; });
  //select clicked
  row.selected = true;
  flow3.selectedItem = row; 
}

ng-click="flow3.selectRow($event, row, flow3.dataSet)"

如果您想对单击/选定的项目应用不同的 css 类，您可能可以保持 selectRow 方法不变（因为我们将选定项目作为 flow3.selectedItem）并更改 ngClass 指令中的条件成为（例如，如果行有一些唯一的 id 属性）：

ng-class="{success: row.id === flow3.selectedItem.id}"

希望这会有所帮助。

【讨论】：