Question

如何突出显示表格中的行？如果未选择行选择框，则必须在单击按钮时进行检查。

我的尝试：

$scope.setClickedRow = function (index) {
    $scope.selectedRow = index;
}

<tr id="TableBody" ng-repeat="code in CodeRegister.CodeDetails" ng-class="{selected:$index != selectedRow}">                 
    <td ng-form="form">
      <select id="reasons" name="reasons" ng-model="code.CategoryID" ng-options=""  >
        <option  default value="">Reasons</option></select>

按钮点击：

<div style="margin-left:70em;" id="Save" class="ribbon-button ribbon-button-large " ng-click="CodeRegister.InsertCodeRegisterDetailss(myForm) && setClickedRow($index)">
</div>

现在加载它会突出显示所有内容，我只希望它突出显示按钮点击事件上的行以及是否未选中选择框。

Answer 1

使用：

ng-class="{true:'selected',false:''}[selectedRow==$index]"

希望这有效。

Answer 2

首先，在<tr>元素上，您应该使用类而不是ID，因为您ng-repeat正在使用它。此外，按照惯例，类名是虚线大小写。所以考虑更换：

<tr id="TableBody" ng-repeat="code in CodeRegister.CodeDetails" ...>

带

<tr class="table-body" ng-repeat="code in CodeRegister.CodeDetails" ...>

至于“在加载时会突出显示所有内容”，这是因为在未触发点击时$scope.selectedRow未定义。因此条件$index != selectedRow为true，因此您已将类selected放在所有行上。考虑ng-class的此值：

ng-class="{selected: selectedRow && $index !== selectedRow}">

突出显示未在按钮上选择的行单击角度js

2 个答案: