AngularJs - 只允许在表中选择一个项目

Question

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

这是我的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; 
}

Answer 1

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

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

基本上你需要使用st-select-row属性和st-select-mode来配置表行（tr）元素中的click。

Answer 2

如果您希望将row属性设置为selected的唯一true，则应修改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}"

希望这有帮助。