AngularJs - 只允许在 Table 中选择一项

Question

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

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

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

特别是与您的问题相关的部分是 'Select Data Rows'。

本质上，您需要使用 st-select-row 属性以及 st-select-mode 来配置 table 行 (tr) 元素中的点击。

Answer 2

如果你想要唯一一个 row 和 selected 属性 设置为 true，你应该修改你的 selectRow 方法来接受集合所有行，然后取消 select 所有行，然后 selecting 单击一个行：

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)"

如果你想对 clicked/selected 项目应用不同的 css class 你可能可以保留你的 selectRow 方法（因为我们有 selected item as flow3.selectedItem) 并将 ngClass 指令中的条件更改为（例如，如果行具有某些唯一 ID 属性）：

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

希望对您有所帮助。